Angular 2：地址栏修改路由时Constructor与ngOnInit未触发求助

这是Angular路由的默认复用策略导致的：当你访问同一路由模板（比如profile/:id）但仅变更路由参数时，Angular会复用已存在的组件实例，不会销毁旧实例也不会创建新实例。而ngOnInit是组件生命周期中仅在实例创建时触发的钩子，所以参数变化时自然不会再次调用。我之前在项目里踩过这个坑，一开始以为是路由配置错了，后来才明白是Angular为了性能优化做的默认行为。

下面是几种常用的解决办法，按推荐程度排序：

1. 订阅ActivatedRoute的参数变化（官方推荐） #

这是最直接且符合Angular设计理念的方式，通过监听路由参数的变化来触发数据更新逻辑，无需重建组件。

示例代码：

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit, OnDestroy {
  private routeSubscription!: Subscription;
  currentProfileId!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅paramMap的变化（paramMap是Angular 4+推荐的参数获取方式）
    this.routeSubscription = this.route.paramMap.subscribe(params => {
      // 获取更新后的id参数
      this.currentProfileId = params.get('id')!;
      // 调用你的数据加载逻辑
      this.loadProfileData(this.currentProfileId);
    });
  }

  private loadProfileData(profileId: string): void {
    // 这里写根据id加载用户信息的逻辑，比如调用API
    console.log(`加载ID为${profileId}的用户数据`);
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.routeSubscription.unsubscribe();
  }
}

如果你使用的是Angular 6+，也可以用async管道自动处理订阅，避免手动取消：

// 在组件类中定义一个可观察对象
profileId$ = this.route.paramMap.pipe(
  map(params => params.get('id')!)
);

// 在模板中使用async管道
<div *ngIf="profileId$ | async as profileId">
  当前用户ID: {{ profileId }}
</div>

2. 配置路由强制触发守卫/解析器 #

如果你的组件依赖路由解析器（Resolver）来获取数据，可以在路由配置中设置runGuardsAndResolvers，让参数变化时重新运行解析器：

const routes: Routes = [
  {
    path: 'profile/:id',
    component: ProfileComponent,
    resolve: {
      profile: ProfileResolver // 假设你有一个解析器
    },
    // 当参数或查询参数变化时，重新运行守卫和解析器
    runGuardsAndResolvers: 'paramsOrQueryParamsChange'
  }
];

这样参数变化时，解析器会重新执行，组件可以通过route.snapshot.data获取最新数据。

3. 强制组件重建（不推荐，仅特殊场景使用） #

如果必须让组件重新初始化（比如组件内部状态复杂，难以通过参数变化重置），可以通过自定义路由复用策略来实现：

创建一个自定义的RouteReuseStrategy，指定当路由参数变化时不复用组件：

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

export class NoReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 仅当路由路径和参数完全相同时才复用
    return future.routeConfig === curr.routeConfig && JSON.stringify(future.params) === JSON.stringify(curr.params);
  }
}

然后在AppModule中提供这个策略：

import { RouteReuseStrategy } from '@angular/router';
import { NoReuseStrategy } from './no-reuse.strategy';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: NoReuseStrategy }
  ]
})
export class AppModule {}

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