변경 감지 초기 지연로드 경로에서 중첩 된 경로 구성 요소 변경을 선택하지 않음

Question

문제가 이상하게 보입니다. 각도 5 응용 프로그램이 firebase 인증 및 ngrx를 사용하고 있습니다. 기본 경로는 HomeLayout이라는 구성 요소이며 응용 프로그램 모듈에서 선언되었습니다 .I 사용자 목록 및 설정이라는 또 다른 모듈이 있습니다. 그들은 app.routing에 게으른로드됩니다. 문제는 내가 로그인을 클릭하면 firebase이 인증 정보를 반환하고 AppStore에 로그인 상태를 업데이트하는 것입니다. AuthService가 있습니다. 이것은 store.The 응용 프로그램이 AuthenticatedGuard를 사용하지 않고 변경 감지와 관련하여 문제없이 작동합니다. AuthenticatedGuard 초기 경로 ngModel을 사용할 때 ngClass 항목이 expected.If로 작동하지 않습니다. routerlink.Then을 사용하여 다른 경로로 이동하면 초기 리디렉션 페이지 (우리의 경우 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; 
    }); 
    } 

} 

마찬가지로 로그인에 적용되는 가드가 하나 더 있습니다. 로그인 한 경우 사용자 목록 경로로 리디렉션됩니다. 라우터 링크 탐색을 위해 router.navigate 메소드 또는 auth guard와 관련된 모든 문제가 있습니다. 예상대로 작동합니다.

Answer 1

문제는 ngZone을 사용하여 각진 라우터 lib.Fixed의 버그로 인한 것입니다. this.ngZone.run(() => this.router.navigateByUrl('/waitlist'))