身份验证后路由器导航重定向不呈现组件

Question

我想在身份验证后重定向到我的主组件。重定向成功，但是 home 组件没有渲染。如果我将 this.router.navigate 移到 subscribe 块之外，它将正确呈现。

export class LoginComponent implements AfterViewInit {
    constructor(private router: Router,
                private authService: AuthenticationService) {

        this.authService.authenticationStream().subscribe(isAuthenticated => {
            if (isAuthenticated) {
                this.router.navigate(['/home']);
            }
        });
    }
}

在 chrome 开发工具中，我可以看到除 ngFor 块之外的所有主组件模板：

<md-grid-tile *ngFor="let tile of CONFIG.tiles">
    {{ tile }}
</md-grid-tile>

我可以验证 CONFIG.tiles 是否已填充。

为什么导航后不会渲染 ngFor 块，特别是来自 Observable 订阅内的导航调用？

编辑：添加 AuthenticationService 代码：

export class AuthenticationService {
    constructor(private http: HttpService,
              private store: Store<AppStore>) {
    }

    authenticate(): void {
        let uri = 'http://uri.com'
        this.http.post(uri).subscribe(() => {
            // Dispatch event to ngrx store if user is successfully authenticated
            this.store.dispatch({type: AUTHENTICATED});
        });
    }

    authenticationStream(): Observable<boolean> {
        // Emits events from dispatch calls
        return <Observable<boolean>> this.store.select(AUTHENTICATION);
    }
}

Answer 1

听起来authenticationStream 会在 Angulars 区域之外发出事件，这会破坏更改检测并导致您描述的行为。

您可以使用zone.run() 强制执行回到 Angulars 区域：

export class LoginComponent implements AfterViewInit {
    constructor(private router: Router,
                private authService: AuthenticationService
                zone: NgZone) {

        this.authService.authenticationStream().subscribe(isAuthenticated => {
            if (isAuthenticated) {
                zone.run(() => this.router.navigate(['/home']));
            }
        });
    }
}