Question

我有一个使用ngOnInit()和login()方法的组件。

如何在登录完成后更新组件并再次执行ngOnInit方法？

ngOnInit() {
    this.loading = true;
    this._guestService.getAllGuests()
        .subscribe(
            guests => this.guests = guests,
            err => console.log(err),
            () => console.log('Request Complete')
         )
}  

login() {
    this.auth.login();
}
logout() {
    this.auth.logout();
}

auth.login服务：

 login() {
   this.lock.show((error: string, profile: Object, id_token: string) => {
     if (error) {
       console.log(error);
     }
     localStorage.setItem('profile', JSON.stringify(profile));
     localStorage.setItem('id_token', id_token);
   });
 }

Answer 1

我会将ngOnInit()重命名为getAllGuests()，然后在getAllGuests()内和ngOnInit()内调用auth.login()。

如果您不能或不想在auth.login()中插入此调用，我想这可能会变得更加微妙，并且需要某种使用Observables的订阅机制，但在开始这条路径之前，我会确保你真的需要它。

我希望这会有所帮助

Answer 2

以下是Picci答案的扩展，我会在订阅login（）时调用getAllGuests：

 ngOnInit(){
    this.getAllGuests();
    }

    getAllGuests() {
        this.loading = true;
        this._guestService.getAllGuests()
            .subscribe(
                guests => this.guests = guests,
                err => console.log(err),
                () => console.log('Request Complete')
             )
    }  

    login() {
        this.auth.login().subscribe(()=> this.getAllGuests());
    }
    logout() {
        this.auth.logout();
    }

Angular 2 - 更新视图/组件

2 个答案: