Angular带参数routerLink修改URL但不触发导航重载如何解决

问题原因 #

你当前使用activateRoute.snapshot.params获取路由参数，这个属性只会在组件首次初始化时读取一次参数值。当跳转的目标路由和当前路由属于同一个组件时，Angular默认不会销毁重建组件，ngOnInit不会重新触发，参数也不会更新，所以即使配置了onSameUrlNavigation: 'reload'也不会生效。

解决方案一：监听路由参数变化（推荐，性能最优） #

不需要强制重载整个组件，只需要订阅ActivatedRoute的params或paramMap Observable，参数变化时自动触发数据拉取逻辑，修改对应组件的ts代码即可：

import { Subscription } from 'rxjs';

// 此处类名对应你实际的ViewPostComponent即可
export class PostComponent implements OnInit, OnDestroy {
  private routeSub: Subscription;
  id: number;
  catid: number;
  postbycategory: PostModel[];

  constructor(private postService :PostService, private activateRoute: ActivatedRoute) {}

  private getPostsbyCategory(){
    this.postService.getPostsByCategory(this.catid).subscribe((data:PostModel[]) => {
      this.postbycategory = data;
      console.log(data)
    }, error => {
      throwError(error);
    });
  }

  ngOnInit() {
    // 订阅路由参数变化，每次参数更新都会触发回调
    this.routeSub = this.activateRoute.params.subscribe(params => {
      this.id = params.id;
      this.catid = params.catid;
      console.log(this.id);
      console.log(this.catid);
      this.getposts();
      this.getPostsbyCategory();
    })
  }

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

该方案无需修改路由配置和模板代码，性能更好，不会出现组件重载的闪屏问题。

解决方案二：强制重载整个组件（适合需要完整重建组件的场景） #

如果业务逻辑必须要完整重新执行组件全生命周期，除了现有的onSameUrlNavigation: 'reload'配置，还需要在对应路由项中添加runGuardsAndResolvers: 'always'，修改app-routing.module.ts的路由配置：

const routes: Routes = [
  { path: '', component: HomeComponent },
  {path: 'home', component: HomeComponent },
  {path: 'test', component: TestComponent },
  {path: 'topics', component: ListTopicsComponent },
  { path: 'view-topics/:id', component: ViewTopicsComponent },
  // 新增runGuardsAndResolvers配置
  {
    path : 'view-post/:catid/:id', 
    component:ViewPostComponent,
    runGuardsAndResolvers: 'always'
  }, 
];

修改后每次路由参数变化都会触发路由守卫和解析器，组件会被销毁重建，ngOnInit会重新执行。

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