Question

我试图实现我认为非常简单直接的行为 - 在登录完成后路由到不同的页面。但是，有些数据没有在其中一个组件中更新，这让我相信它与Angular 2的变化检测有关。

这是我的代码：

登录组件 - 页面模块的一部分

constructor(private _af: AngularFire,
            private _router: Router,
            private _zone: NgZone) {
}

onLoginSubmit() {
    this._af.auth.login({
        email: this.auth.email,
        password: this.auth.pass
    }).then( success => {
        this._zone.run(() => {
            this._router.navigate(['/']);
        });
    })
}

仪表板组件 - 页面模块的一部分 - 路由＆＃39; /＆＃39;

ngOnInit() {
    this._stateService.currentPageName = 'Dashboard';
}

Topbar组件 - UI模块的一部分

ngOnInit() {
    this._router.events.subscribe(() => {
        this.pageName = this._stateService.currentPageName;
    });
}

Topbar模板

    <!--  This is not updated when I'm routing from the login page, 
          but it shows fine when I'm reloading the page or switching to any other routes -->
        <a class="navbar-brand">{{ pageName }}</a>

Answer 1

我猜您在设置router.events之前已经解雇了currentPageName。

快速简便的解决方案：在BehaviorSubject内使用StateService而不是简单的string。

currentPageName = new BehaviorSubject<string>('');

在Dashboard组件内设置新值：

ngOnInit() {
   this._stateService.currentPageName.next('Dashboard');
   // or create a function inside of your service
   // this._stateService.setCurrentPage('Dashboard');
}

直接在BehaviorSubject模板中使用此Topbar：

<a class="navbar-brand">{{ _stateService.currentPageName | async }}</a>

Angular 2 + Angular Fire 2登录 - 未检测到更改

1 个答案: