Angular 5中点击同组件RouterLink如何强制刷新组件？

这个问题其实是Angular路由的默认优化行为导致的——为了提升性能，当导航到同一组件的路由（仅参数不同）时，Angular不会销毁现有组件实例再创建新的，所以constructor和ngOnInit这些生命周期钩子只会在首次加载时触发，参数变化时自然不会执行。下面给你几种实用的解决方案：

方法1：订阅路由参数变化（推荐） #

这是最常用也最优雅的方式，不用强制重建组件，而是在组件内部监听路由参数的变化，然后执行对应的业务逻辑（比如重新加载数据）。

修改你的MyComponent代码：

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

export class MyComponent implements OnInit, OnDestroy {
  // 保存订阅对象，防止内存泄漏
  private routeSubscription: Subscription;

  constructor(private route: ActivatedRoute) { 
    console.log("constructor"); 
  }

  ngOnInit() {
    console.log("ngOnInit");
    
    // 订阅路由参数的变化
    this.routeSubscription = this.route.paramMap.subscribe(params => {
      // 获取最新的id参数
      const currentId = params.get('id');
      // 这里执行参数变化后的逻辑，比如重新加载对应id的数据
      this.handleIdChange(currentId);
    });
  }

  private handleIdChange(id: string) {
    console.log(`当前id变为: ${id}`);
    // 补充你的业务逻辑，比如调用接口获取对应id的数据
  }

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

这样不管你点击哪个同路由链接，只要id参数变化，handleIdChange就会触发，完美适配你的需求。

方法2：配置路由强制重新导航（Angular 5.1+适用） #

如果你的Angular版本是5.1及以上，可以通过路由配置让同URL导航时强制重新加载组件。

首先修改app.module.ts里的路由配置：

@NgModule({
  imports: [
    RouterModule.forRoot([
      { 
        path: 'component/:id', 
        component: MyComponent, 
        pathMatch: 'full',
        // 强制每次导航都运行守卫和解析器
        runGuardsAndResolvers: 'always'
      }
      // 其他路由...
    ], {
      // 允许同URL导航时重新加载
      onSameUrlNavigation: 'reload'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这种方式会让Angular在同URL导航时重新触发路由生命周期，包括销毁并重建组件，这样constructor和ngOnInit就会再次执行。不过注意，这种方式会带来一定性能开销，因为组件会被重复销毁重建，所以如果只是需要处理参数变化，方法1更合适。

方法3：手动触发组件重建（非常规hack） #

如果你一定要让组件销毁再重建，可以通过添加随机参数的方式，让Angular认为是不同路由。比如修改模板链接：

<li><a [routerLink]="['/component', 1]" [queryParams]="{t: Date.now()}">Component 1</a></li>
<li><a [routerLink]="['/component', 2]" [queryParams]="{t: Date.now()}">Component 2</a></li>

不过这种方式会在URL上添加不必要的参数，属于临时 workaround，不推荐作为常规方案。

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