在第一个组件之前执行时，在两个组件之间共享值答案

【问题标题】：Share the value between two components as the first component get executed before在第一个组件之前执行时，在两个组件之间共享值
【发布时间】：2019-11-07 17:28:28
【问题描述】：

我有两个组件 navbarcomponent 和 logincomponent。

  <app-navbar></app-navbar>
  <app-login></app-login>

navbarcomponent 在logincomponent 之前执行。在我的logincomponent 中，当用户登录时，我将用户信息设置在本地存储中。我在我的navbarcomponent 的ngoninit 中调用它。

ngOnInit() {
this.user = localStorage.getItem("user");
}

但用户变量始终为 null 。因为它在logincomponent 实例化它之前被执行。

有没有办法在login中的方法执行后获取值？

【问题讨论】：

这两个都是子组件？
是的，他们都是 app.component 的孩子
Angular 4 pass data between 2 not related components的可能重复

标签： angular

【解决方案1】：

您需要创建一个服务来在 2 个组件之间共享数据。

export class CheckLoginService {
    public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

    callLoadData(value: boolean) {
        this.status.next(value);
    }
}

导航栏组件：

export class NavbarComponent implements OnInit {

  constructor(private checkLoginService: CheckLoginService) { }
  isLoggedIn: boolean = false
  sessionFirstName: string


  ngOnInit() {
    this.checkLogin()
    this.checkLoginService.status.subscribe((val: boolean) => {
      if (val == true) {
        this.sessionFirstName = localStorage.getItem('sessionFirstName');
      }
    });
  }

}

登录组件

login(user:any) {
    localStorage.setItem('sessionFirstName', user.userFirstName)
    this.checkLoginService.callLoadData(true);
}

【讨论】：

【解决方案2】：

您还可以使用EventEmitter 和Input 来更新两个子组件之间的值。

Login.Component.ts

@Output() updateUserNameEmitter = new EventEmitter();

login(){
  this.updateUserNameEmitter.emit(localStorage.getItem("user");)
}

App.component.html

<app-login (updateUserNameEmitter)="updateUserName($event)"></app-login>
<app-navbar [userName]="userName"></app-navbar>

App.Component.ts

public userName: string;

updateUserName(userName){
 this.userName = userName;
}

【讨论】：

如果两个组件都是同一个父组件的子组件，这是一种更简单的数据共享方式。但是对于登录情况，最好创建一个服务，因为其他服务以及令牌到期时的 httpinterceptor 服务可能会发生注销，此时需要更新导航栏
@AdritaSharma 是的，同意。