認証後にルーターのナビゲートリダイレクトコンポーネントがレンダリングされない

Question

認証後に私のホームコンポーネントにリダイレクトしたい。リダイレクトは成功しましたが、ホームコンポーネントはレンダリングされません。 subscribeブロックの外でthis.router.navigateを移動すると、正しくレンダリングされます。

export class LoginComponent implements AfterViewInit { 
    constructor(private router: Router, 
       private authService: AuthenticationService) { 

     this.authService.authenticationStream().subscribe(isAuthenticated => { 
      if (isAuthenticated) { 
       this.router.navigate(['/home']); 
      } 
     }); 
    } 
} 

は、クロームのdevのツールでは、私はngForブロック以外のホームコンポーネントのテンプレートのすべてを見ることができます：

<md-grid-tile *ngFor="let tile of CONFIG.tiles"> 
    {{ tile }} 
</md-grid-tile> 

私が移入されCONFIG.tilesを確認することができます。

なぜngForブロックは、Observableサブスクリプション内のナビゲートコールからナビゲートしてレンダリングされないのですか？

EDIT：AuthenticationServiceコードを追加：

export class AuthenticationService { 
    constructor(private http: HttpService, 
       private store: Store<AppStore>) { 
    } 

    authenticate(): void { 
     let uri = 'http://uri.com' 
     this.http.post(uri).subscribe(() => { 
      // Dispatch event to ngrx store if user is successfully authenticated 
      this.store.dispatch({type: AUTHENTICATED}); 
     }); 
    } 

    authenticationStream(): Observable<boolean> { 
     // Emits events from dispatch calls 
     return <Observable<boolean>> this.store.select(AUTHENTICATION); 
    } 
} 

Answer 1

authenticationStreamが変化検出を壊し、あなたが説明した行動につながるAngularsゾーン外のイベントを発するように聞こえます。

あなたが戻ってAngularsゾーンに実行を強制的にzone.run()を使用することができます。

export class LoginComponent implements AfterViewInit { 
    constructor(private router: Router, 
       private authService: AuthenticationService 
       zone: NgZone) { 

     this.authService.authenticationStream().subscribe(isAuthenticated => { 
      if (isAuthenticated) { 
       zone.run(() => this.router.navigate(['/home'])); 
      } 
     }); 
    } 
}