时间戳

首页 > 解决方案 > 如何在组件之间共享变量（Angular）？

angular - 如何在组件之间共享变量（Angular）？

问题描述

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

登录组件.ts

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

details.component.ts

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

}

details.component.html

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

</app-details>

login.component.html

<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>

标签： angulartypescripttemplates

解决方案

您可以实现此目的的方法之一是传递imageUrl并email与导航到queryParams组件一样。然后，您可以订阅observable以获取变量。在模板上有这个：routerLinkdetailsActivatedRoute's queryParamsDetailsComponentLoginComponent

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

然后DetailsComponent你可以有这个：

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'];
    });
  }
}

推荐阅读