Угловая 2 - переменная компонента от услуги не изменяется на вид

Question

У меня есть MainMenuComponent с некоторыми ссылками для навигации. Некоторые ссылки для подписчиков, некоторые для гостей и некоторые для всех.

Мой мастер шаблон (master.html) выглядит следующим образом:

<main-menu></main-menu> 

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

внутри моей router-outlet, у меня есть login component. Когда я вхожу в систему, я меняю свою переменную JwtService.jwtToken на токен пользователя. (Переменная службы)

Это означает, что после входа в систему, я все еще могу видеть «Login» и «Регистрация» ссылки меню:

<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() 

и остается нулевым пока я не обновляю свой браузер/маршрут **

Answer 1

У меня была такая же проблема с компонентами за пределами router-outlet в Angular2, вызванными зонами и стратегией обнаружения изменений.

Вы можете заставить Angular2 проверить полное дерево компонентов с помощью метода ApplicationRef.tick().

В вашем login компонента:

Добавить ссылку на ApplicationRef

import {ApplicationRef} from 'angular2/core'; 

впрыскивать ApplicationRef в конструкторе:

constructor(public appRef: ApplicationRef) 

тогда, когда вы получите ответ от службы силы аутентификации приложение Angular2 снова проведет проверку изменений:

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

Ваш main-menu компонент должен быть обновлен, как ожидалось.