変更検出が初期の遅延ロードルートでネストされたルートコンポーネントの変更を取得しない

Question

問題が奇妙に思われる。角度5アプリケーションがfirebase認証とngrxを使用している。デフォルトルートはHomeLayoutと呼ばれ、アプリケーションモジュールで宣言されている。 UserlistとSettingsという別のモジュールがあります。それらはapp.routingに怠け者です。問題は、私がログインをクリックするとfirebaseがauth情報を返し、私はAppStore.Andにログインしたステータスを更新します。これはstore.TheアプリケーションがAuthenticatedGuardを使用せずに変更検出に問題なく動作します。 AuthenticatedGuardを初期ルートngModelで使用すると、ngClassアイテムは期待通りに動作しません。ルータリンクを使用して他のルートに移動すると、最初のリダイレクトページ（私たちのケースではUserlist）に戻ると正常に動作します。

app.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { NotFoundComponent } from './components/not-found/not-found.component'; 
import { HomeLayoutComponent } from './containers/home-layout/home-layout.component'; 
import { LoginComponent } from './components/login/login.component'; 
import { SignupComponent } from './components/signup/signup.component'; 
import { AuthenticatedGuard } from './core/guards/authenticated.guard'; 
import { UnauthenticatedGuard } from './core/guards/unauthenticated.guard'; 
const appRoutes: Routes = [ 
        { path: '', redirectTo: 'userlist', pathMatch: 'full'}, 
        { path: '', component: HomeLayoutComponent, canActivate: [AuthenticatedGuard], 
     children: [ 
      { 
      path: 'userlist', 
      loadChildren: 'app/containers/userlist/userlist.module#UserlistModule' 
      }, 
      { 
      path: 'settings', 
      loadChildren: 'app/containers/settings/settings.module#SettingsModule' 
      } 
     ] 
     }, 
        { path: 'login', component: LoginComponent, canActivate: [UnauthenticatedGuard]}, 
     { path: 'signup', component: SignupComponent }, 
     { path: 'unavaliable', component: NotFoundComponent }, 
        // otherwise redirect to home 
        { path: '**', redirectTo: 'unavaliable' } 
    ]; 



export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes, { enableTracing: true }); 

auth.effect.ts

@Effect() 
    googleloginAction$: Observable<Action> = this.actions$ 
     .ofType(authActions.AuthActionTypes.GOOGLE_LOGIN_REQUESTED) 
     .map(action => action) 
     .switchMap((payload: any) => this.authService.googleLogin() 
     .map(res => (new authActions.GoogleLoginSuccessAction(new authActions.AuthUserPayload(res)))) 
      .do(() => this.router.navigate(['/userlist'])) 
      .catch((error) => Observable.of(new authActions.AuthErrorAction({error: error}))) 
    ); 

AuthGuardサービス

import { Injectable } from '@angular/core'; 
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { Store } from '@ngrx/store'; 
import { AppState, isLoggedIn } from '../../reducers'; 


@Injectable() 
export class AuthGuard { 
    constructor(private store: Store<AppState>) {} 
    isLoggedIn(): Observable<boolean> { 
     return this.store.select(isLoggedIn).do(x => console.log('User Logged:', x)); 
    } 
} 

AuthenticatedGuard

import { Injectable } from '@angular/core'; 
import { CanActivate, ActivatedRoute, Routes } from '@angular/router'; 
import { AuthGuard } from './auth.guard'; 
import { Observable } from 'rxjs/Observable'; 
import { Router } from '@angular/router'; 
import 'rxjs/add/operator/do'; 

@Injectable() 
export class AuthenticatedGuard implements CanActivate { 
    constructor(private authGuard: AuthGuard, 
    private router: Router, 
    private activatedRoute: ActivatedRoute) { 
    } 
    canActivate(): Observable <boolean> { 
    return this.authGuard.isLoggedIn().map(loggedIn => { 
     if (!loggedIn) { 
     this.router.navigate(['/login'], { 
      relativeTo: this.activatedRoute 
     }); 
     return false; 
     } 
     return true; 
    }); 
    } 

} 

同様に私はログインに適用されるもう1つのガードを持っています。ログインしているとユーザリストルートにリダイレクトされます。 疑問は、router.navigateメソッドまたはauthガードの問題は、期待どおりに動作します。

Answer 1

この問題は、ngZoneを使用して角度ルータのlib.Fixedのバグが原因でした。 this.ngZone.run(() => this.router.navigateByUrl('/waitlist'))