角2 +角膜炎2ログイン - 変化を検出しない

Question

私は、ログインが完了したら、別のページにルーティングする、非常に単純で直感的な振る舞いであると思うものを実装しようとしています。しかし、一部のデータはコンポーネントの1つで更新されていないため、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(['/']); 
     }); 
    }) 
} 

ダッシュボードコンポーネント - ページモジュールの一部 - ルート '/'

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

私はあなたがcurrentPageNameを設定する前に、あなたのrouter.eventsが発射されていることを推測します。

簡単で簡単な解決策：stringの代わりにStateServiceの中にBehaviorSubjectを使用します。あなたのTopbarテンプレートの内部で直接このBehaviorSubjectを使用

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

：

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

新しいあなたDashboard部品の内部値を設定

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

あなたが角度のngOnChanges（）のライフサイクルフックを使用することができ