Question

我有两个成分"@target/rerun.txt"和navbarcomponent。

logincomponent

<app-navbar></app-navbar> <app-login></app-login>在navbarcomponent之前执行。在我登录用户的logincomponent中，我将用户信息设置在本地存储中。而我在logincomponent的ngoninit中调用它。

navbarcomponent

但是用户变量始终为null。因为它是在ngOnInit() { this.user = localStorage.getItem("user"); }实例化之前执行的。

执行登录方法后是否可以获取值？

Answer 1

您需要创建一个用于在两个组件之间共享数据的服务。

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

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

NavbarComponent：

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

}

LoginComponent

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

Answer 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;
}

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

2 个答案: