Question

我有app.component，顶部有一个菜单。当用户登录登录页面时，它会被重定向到数据页面列表，用户应该在顶部菜单中看到他的电子邮件，但它不会加载到app.component中的ngonit上。当我重新加载页面时，它出现在那里。

我需要在用户登录并重定向到数据列表页面后立即使用它。

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

登录组件：

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

您需要让用户成为登录服务中的可观察对象。然后让AppComponent订阅observable。然后，一旦您成功登录，请使用login方法发送下一个可观察值。 AppComponent中的订阅将被触发，您的价值将在那里。这有意义吗？

你可以在Angular文档中看到一个很好的例子。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

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

1 个答案: