在其他页面上登录用户后，以角度2加载应用程序组件数据

Question

I have app.component which has a menu on the top. When user logged in in the login page it is redirected to the list of data page and user should see his email in the top menu but it won't loaded on ngonit in app.component. When I reload the page it is appear there.

I need it to be right after user logged in and redirected to the data list page.

app.component:

export class AppComponent implements OnInit{
  title = 'app works!';
  userEmail: any;
  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit() {
    this.userEmail = this.authService.getUser().name;
    console.log(this.userEmail);
  }
}

login component:

onLogin(){
    const user ={
      email: this.email,
      password: this.password
    }

    this.authService.loginUser(user).subscribe((data)=>{
      if(data.success){
        this.authService.userData(data.token, data.user);
        this.flashMessage.show('You are logged in.', {cssClass: 'alert-success'});
        this.router.navigate(['/']);
      }else{
        console.log('user didn\'t logged in');
        this.flashMessage.show('You are not logged in. Wrong email or password.', {cssClass: 'alert-danger', timeout: 2000})
        this.router.navigate(['/login']);
      }
    });

  }

Answer 1

You need to have the user be an observable in the login service. And then have the AppComponent subscribe to the observable. Then once you login successfully, have the login method send the next observable value. The subscription in the AppComponent will be triggered and your value will be there. Does that make sense?

You can see a good example in the Angular docs. https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service