Angular 4.4.6登录后首次导航至/groups时ngOnInit未触发求助

这个问题我之前在Angular + Firebase项目里也踩过一模一样的坑，本质是Angular的变更检测机制和Firebase回调的执行上下文不匹配导致的，先给你拆解两种导航触发方式的差异，再讲问题根源：

两种导航触发方式的核心差异 #

1. 手动按钮触发导航 #

按钮点击是Angular原生支持的交互逻辑，整个操作全程运行在**Angular Zone（Zone.js）**的上下文里。Zone.js会自动追踪这个上下文内的所有异步操作和状态变化，当你调用this.router.navigate时，Angular能完整感知到路由跳转的全流程：

• 组件实例被创建（构造函数执行）
• 按顺序触发ngOnInit等生命周期钩子
• 自动启动变更检测，把动态数据渲染到模板上

所以这种方式下所有功能都正常。

2. onAuthStateChanged回调内触发导航 #

Firebase的onAuthStateChanged是原生JavaScript的异步回调，它的执行上下文是在Angular Zone之外的。Zone.js没法拦截这类第三方库的原生异步事件，这就导致：

• 路由确实跳转了，组件构造函数能执行（因为组件实例被创建了）
• 但Angular完全不知道这个异步回调已经执行完毕，不会触发后续的变更检测流程
• 依赖变更检测才能触发的ngOnInit钩子就不会被调用，动态数据绑定自然也无法更新到模板上

你说加延迟定时器也没用，是因为如果定时器是在Zone外的回调里调用的，这个定时器同样处于Zone外，Angular还是不会感知到它的完成，所以问题依然存在。

问题根源总结 #

Angular的变更检测、生命周期钩子触发都是依赖Zone.js来追踪异步操作的。当操作在Zone外执行时，Angular无法同步更新组件状态，导致组件初始化流程不完整，ngOnInit等关键钩子失效。

快速解决方法 #

有两种靠谱的解决方式，选哪种都可以：

方式1：用NgZone包裹导航操作 #

注入Angular的NgZone服务，把导航代码放到ngZone.run()里，强制让操作回到Angular Zone的上下文：

import { NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';

constructor(
  private afAuth: AngularFireAuth,
  private router: Router,
  private ngZone: NgZone
) {
  this.afAuth.auth.onAuthStateChanged(user => {
    if (user) {
      // 包裹在NgZone.run里，让Angular感知到这个操作
      this.ngZone.run(() => {
        this.router.navigate(['/groups']);
      });
    }
  });
}

方式2：使用AngularFire2封装的authState Observable #

AngularFire2已经把Firebase的auth状态变化包装成了Angular Zone内的Observable，直接订阅它的话，回调会自动在Zone内执行：

import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';

constructor(
  private afAuth: AngularFireAuth,
  private router: Router
) {
  this.afAuth.authState.subscribe(user => {
    if (user) {
      this.router.navigate(['/groups']);
    }
  });
}

这两种方式都能让Angular正常触发变更检测，ngOnInit也会按预期执行，动态内容就能加载出来了。

内容的提问来源于stack exchange，提问作者popClingwrap