角2 - サービスのコンポーネント変数がビューで変更されていません

Question

私はMainMenuComponentにいくつかのナビゲーションリンクがあります。 一部のリンクは署名されたメンバー、一部はゲスト、一部は誰ものためのリンクです。

私のマスターテンプレート（master.html）は次のようになります。私のrouter-outlet内部

<main-menu></main-menu> 

<div class="container"> 
<router-outlet></router-outlet> 
</div> 

、私はlogin componentを持っています。私がログインすると、自分のJwtService.jwtToken変数をユーザートークンに変更します。 （サービス変数）

ログイン後、私はまだ、「ログイン」および「登録」メニューへのリンクを見ることができることを意味：

<li *ngIf="!JwtService.getToken()" [class.active]="isRouteActive(['/Login'])"><a [routerLink]="['Login']">Login</a></li> 
     <li *ngIf="!JwtService.getToken()" [class.active]="isRouteActive(['/Register'])"><a [routerLink]="['Register']">Register</a></li> 
     <li *ngIf="JwtService.getToken()" [class.active]="isRouteActive(['/Fight'])"><a [routerLink]="['Fight']">Fight</a></li> 
     <li *ngIf="JwtService.getToken()"><a (click)="logOut()">Log Out</a></li> 

なぜJwtService.getToken（）は私の<router-outlet>に変更されないが、私のメインメニューのコンポーネントの外に、それは更新されていない？つまり**

を（私は手動でページを更新しない限り）：私のサービス変数がjwtService.setToken("MY_TOKEN"); を使用してログイン後に変更されたとき、私の見解では、以下の式が変更されません。

JwtService.getToken() 

、それがnullのままブラウザ/ルートをリフレッシュするまで

Answer 1

Angular2のrouter-outlet以外のコンポーネントで、ゾーンと変更の検出方法によって同じ問題が発生しました。

ApplicationRef.tick()メソッドを使用すると、Angular2に完全​​なコンポーネントツリーを強制的に確認させることができます。あなたのloginコンポーネントで

：

コンストラクタにApplicationRefを注入ApplicationRef

import {ApplicationRef} from 'angular2/core'; 

への参照を追加します。

constructor(public appRef: ApplicationRef) 

、あなたは認証サービス力からの応答を受信したとき再びAngular2アプリが変更検出を再開する：

this.appRef.tick(); // this will refresh the bindings 

main-menuコンポーネントは、期待どおりに更新されるはずです。