Angular 如何在组件（角度）之间共享变量？

我有两个组件，我正在尝试将数据（两个变量）从登录组件导出到详细信息组件。我已启用路由。我好像不工作。在哪里绑定变量？我想在一个新链接上显示一个细节组件，在这里我可以使用这两个变量

login.component.ts

export class LoginComponent implements OnInit {
  imgURL = "link";
  email = "email";
}

export class DetailsComponent implements OnInit {
  
  @Input() imgURL;
  @Input() email;

}

details.component.ts

export class LoginComponent implements OnInit {
  imgURL = "link";
  email = "email";
}

export class DetailsComponent implements OnInit {
  
  @Input() imgURL;
  @Input() email;

}

details.component.html

<app-details [imgURL]="imgURL">
    {{imgURL}}

</app-details>

<div class="container mt-5">
    <h2>Google Login</h2>
    <div class="row mt-5">
      <div class="col-md-4 mt-2 m-auto ">
            <button class="login-Btn" #loginRef>
              Login with Google<img class="social-btn-icon" alt="Login with Google" src="https://hrcdn.net/fcore/assets/google-colored-20b8216731.svg">
            </button>
            <a routerLink="/details" routerLinkActive="active">Details</a>
      </div>   
    </div>
  </div>

{{imgURL}}

login.component.html

<app-details [imgURL]="imgURL">
    {{imgURL}}

</app-details>

<div class="container mt-5">
    <h2>Google Login</h2>
    <div class="row mt-5">
      <div class="col-md-4 mt-2 m-auto ">
            <button class="login-Btn" #loginRef>
              Login with Google<img class="social-btn-icon" alt="Login with Google" src="https://hrcdn.net/fcore/assets/google-colored-20b8216731.svg">
            </button>
            <a routerLink="/details" routerLinkActive="active">Details</a>
      </div>   
    </div>
  </div>

谷歌登录
使用谷歌登录
细节

实现这一点的方法之一是使用导航到

详细信息
组件的
routerLink
将
imageUrl
和
email
作为
queryParams
传递。然后，您可以订阅
ActivatedRoute的
查询参数
可在
details组件上查看，以获取变量。
在
LoginComponent
模板上，具有以下内容：

<a [routerLink]="['/details']" [queryParams]="{ email: {{email}}, imgUrl: {{imgUrl}} }" routerLinkActive="active">Details</a>

export class DetailsComponent implements OnInit {

  imgUrl: string;
  email: string;

  constructor(
    private route: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.email = params['email'];
      this.imgUrl = params['imgUrl'];
    });
  }
}

查看此文档或官方文档，了解更多有关角度和数据共享技术的信息。