如何让带routerLink的a标签强制重载对应Angular路由？

我定义了如下路由：

[
  {
    path: '',
    component: MyComponent,
  },
  {
    path: ':id',
    component: MyComponent,
  },
  ...
]

通过该路由可访问/foo（显示所有记录）或/foo/123（显示特定ID的记录），组件会根据是否存在id参数加载对应数据。

但存在问题：当处于/foo/123页面时，点击以下链接：

<a routerLink="/foo">foo!</a>

URL会变为/foo，但组件并未重新渲染，仍然显示ID为123的记录，而非预期的记录列表。

我已尝试以下方案但均无效：

• 在路由中添加runGuardsAndResolvers: 'always'
• 在根路由配置中设置{onSameUrlNavigation: 'reload'}
• 在a标签添加时间戳查询参数

1. 监听路由参数变化 #

由于两个路由复用同一组件，Angular默认不会重新实例化组件，需在组件内部监听路由变化，手动触发数据加载：

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

@Component({...})
export class MyComponent {
  private routeSub: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 监听路由URL变化
    this.routeSub = this.route.url.subscribe(() => {
      this.loadData();
    });
  }

  loadData() {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      // 加载单条记录逻辑
    } else {
      // 加载所有记录逻辑
    }
  }

  ngOnDestroy() {
    // 取消订阅避免内存泄漏
    this.routeSub.unsubscribe();
  }
}

2. 用工厂函数强制创建新组件实例 #

在路由配置中，不直接指定组件，改用工厂函数返回组件类，确保每次路由切换都生成新的组件实例：

[
  {
    path: '',
    component: () => MyComponent,
  },
  {
    path: ':id',
    component: () => MyComponent,
  },
  ...
]

3. 结合解析器与路由配置 #

若之前设置onSameUrlNavigation: 'reload'无效，可配合解析器确保每次路由切换都重新获取数据：

首先创建数据解析器：

import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

export class DataResolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    const id = route.paramMap.get('id');
    if (id) {
      // 返回单条数据的Observable
    } else {
      // 返回所有数据的Observable
    }
  }
}

然后更新路由配置：

import { DataResolver } from './data.resolver';

[
  {
    path: '',
    component: MyComponent,
    resolve: { data: DataResolver },
    runGuardsAndResolvers: 'always'
  },
  {
    path: ':id',
    component: MyComponent,
    resolve: { data: DataResolver },
    runGuardsAndResolvers: 'always'
  },
  ...
]

最后在组件中获取解析后的数据：

ngOnInit() {
  this.route.data.subscribe(data => {
    this.recordData = data.data;
  });
}

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