Угловая 2.0.0 [скрыт] не работает в некоторых случаях

Question

я макет с [hidden]:

<main id="content" class="content view-animate fade-up" role="main"> 
    <div [hidden]="!preloader.isLoading"> 
      <img class="absolute-center" src="/assets/img/cube.svg" alt="Loading..."/> 
    </div> 
    <div [hidden]="preloader.isLoading"> 
      <router-outlet></router-outlet> 
    </div> 
</main> 

Я услуг справиться с этим:

export class PreloaderService { 
    private _isLoading: boolean = false; 
    constructor(router:Router) { 
     router.events.subscribe((event) => { 
      console.log('event',event); 
      if(event instanceof NavigationStart) { 
       this._isLoading = true; 
      } 
      if(event instanceof NavigationCancel || event instanceof NavigationError || event instanceof NavigationEnd) { 
       this._isLoading = false; 
      } 
     }); 
    } 
    get isLoading() { 
     return this._isLoading; 
    } 
} 

Проблема: когда я При входе в систему с учетной записью Facebook я вижу загрузчик, а затем мою целевую страницу. Если я выйду из системы сразу после этого и снова войдите в систему с FB, событие NavigationEnd, значение preloader.isLoading изменено на false, но загрузка изображения все еще видна. Если я нажму что-нибудь (например, в меню возле области страницы) - страница стала видимой, а загрузчик исчез. Если я перезагружаю страницу после выхода из системы, загрузка страницы будет обработана в обычном режиме.

Answer 1

Это звучит как какой-то обратный вызов проходит вне зоны углов.

export class PreloaderService { 

    private _isLoading: boolean = false; 

    constructor(router:Router, cdRef:ChangeDetectorRef) { // <<<=== modified 
     router.events.subscribe((event) => { 
      console.log('event',event); 
      if(event instanceof NavigationStart) { 
       this._isLoading = true; 
       cdRef.detectChanges(); // <<<=== added 
      } 
      if(event instanceof NavigationCancel || event instanceof NavigationError || event instanceof NavigationEnd) { 
       this._isLoading = false; 
       cdRef.detectChanges(); // <<<=== added 
      } 
     }); 
    } 
    get isLoading() { 
     return this._isLoading; 
    } 
} 

Это лучше использовать zone.run() где обратные вызовы Angular2 код вне зоны, но этот код не содержится в вашем вопросе.

Вышеуказанный код должен хотя бы работать, чтобы убедиться, что мое предположение верно.