Angular 4/5技术问题：导航后组件未调用及错误处理器路由异常

我来帮你梳理这两个Angular开发中常见的导航问题，都是我自己踩过的坑，给你亲测有效的解决思路：

问题1：Angular 4中导航后组件代码未被调用 #

这种情况大概率是路由复用策略在搞鬼，Angular默认的RouteReuseStrategy会复用组件实例，导致ngOnInit这类初始化钩子不会重复触发，尤其是在导航到同一组件但参数变化的场景下。

解决办法： #

• 监听路由参数变化：如果只是需要在参数更新时执行逻辑，不用强制刷新组件，直接在组件里订阅路由参数的变化：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 每次路由参数变化都会触发这个订阅
  this.route.params.subscribe(params => {
    this.handleNavigation(params.id); // 这里放你需要执行的代码
  });
}

• 禁用路由复用：如果完全不需要复用组件，可以自定义一个不做复用的路由策略：

import { RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';

export class NoRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach() { return false; }
  store() {}
  shouldAttach() { return false; }
  retrieve() { return null; }
  shouldReuseRoute(future, curr) { return false; }
}

然后在AppModule的providers里注册：

providers: [
  { provide: RouteReuseStrategy, useClass: NoRouteReuseStrategy }
]

• 强制触发路由守卫与解析器：在路由配置里添加runGuardsAndResolvers: 'always'，确保每次导航都会执行守卫和解析逻辑：

const routes: Routes = [
  {
    path: 'your-path/:id',
    component: YourComponent,
    runGuardsAndResolvers: 'always'
  }
];

问题2：Angular 5.0.0错误处理器跳转后OnInit未执行、成员变量无法访问 #

这个问题的核心是：在ErrorHandler的同步错误处理流程中调用路由跳转，会干扰Angular的变更检测和组件初始化流程，导致组件虽然渲染了，但生命周期钩子没正常执行，变更检测也没触发。而F5刷新是从头启动应用，所以能正常初始化。

解决办法： #

• 异步执行路由跳转：用setTimeout把导航操作放到异步队列里，让Angular先完成当前的错误处理，再执行导航：

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  // 用Injector避免Router和ErrorHandler之间的循环依赖
  constructor(private injector: Injector) {}

  handleError(error: any) {
    const router = this.injector.get(Router);
    const errorWithContextInfo = { message: error.message, stack: error.stack };
    
    // 包裹成异步操作，给Angular留足处理错误的时间
    setTimeout(() => {
      router.navigate(['/error'], { queryParams: errorWithContextInfo });
    }, 0);
    
    console.error('全局错误捕获:', error);
  }
}

• 用NgZone包裹导航：如果异步还不行，就用NgZone确保导航在Angular的变更检测上下文里执行：

import { NgZone } from '@angular/core';

// 在CustomErrorHandler里注入NgZone
handleError(error: any) {
  const router = this.injector.get(Router);
  const ngZone = this.injector.get(NgZone);
  
  ngZone.run(() => {
    router.navigate(['/error'], { queryParams: errorWithContextInfo });
  });
}

• 检查组件变更检测策略：如果你的错误组件用了ChangeDetectionStrategy.OnPush，需要手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

constructor(private cdr: ChangeDetectorRef, private route: ActivatedRoute) {}

ngOnInit() {
  // 初始化成员变量后手动触发变更检测
  this.errorMessage = this.route.snapshot.queryParamMap.get('message');
  this.cdr.detectChanges();
}

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