可见未刷新视图-Angular 2+

Question

当我打电话login()或logout()显示Facebook的弹出后auth.service.ts从login.ts组成部分， isAuth在主页视图保持假，但如果我这样做console.log(this.isAuth)内部subscribe()它在控制台中正确更新。

当我直接调用login()或logout()而不使用firebase facebook login时， 它可以正常工作 。

家

HTML

 <h1> {{isAuth}} </h1>

TS

 isAuth = false;

 constructor(private _auth:AuthService) {
    _auth.authState.subscribe(state => this.isAuth = state)
   }

AuthService

authState = new Subject<boolean>();

login(access_token) {
    this.authState.next(true);
  }

 logout() {
    this.authState.next(false);
  }

主题是从导入的

从“ rxjs / Subject”导入{Subject}；

login.ts

signInWithFacebook() {
    this.afAuth.auth
      .signInWithPopup(new firebase.auth.FacebookAuthProvider())
      .then((res: any) => {
        const access_token = res.credential.accessToken;
        this._auth.login(access_token);
        this._router.navigateByUrl('/home');      
      });

Facebook承诺已解决，并调用this._auth.login()并更改了isAuth ，但视图未更新...

Answer 1

也许您可以尝试NgZone

TS

isAuth = false;

constructor(private _auth:AuthService, private ngZone: NgZone) {
ngZone.run(() => {
   _auth.authState.subscribe(state => this.isAuth = state)
  });
}