Angular中点击game路由时如何实现页面自动刷新？

问题原因 #

Angular默认的路由复用策略会复用路径相同的路由对应的组件实例，因此当导航到game路由时，如果组件实例已经存在，就不会重新执行ngOnInit等初始化钩子，写在初始化逻辑里的数据请求不会触发，最终表现为页面数据没有更新。

可行解决方案 #

方案1：组件内监听路由变化（最推荐，性能最优） #

不需要修改路由配置，无组件销毁重建开销，只需在GameComponent中订阅路由事件，命中路由时主动触发数据加载即可：

1. 导入所需依赖：

import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs';

2. 在组件内添加订阅逻辑：

export class GameComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    // 你的业务数据服务，比如 GameService
  ) {}

  ngOnInit() {
    // 监听导航结束事件，当前为game路由时重新拉取数据
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      filter(() => this.activatedRoute.snapshot.routeConfig?.path === 'game' /* 替换为实际的game路由路径 */)
    ).subscribe(() => {
      this.loadGamePageData(); // 替换为实际的业务数据加载方法
    });

    // 首次进入页面也需要触发一次数据加载
    this.loadGamePageData();
  }

  private loadGamePageData() {
    // 你的业务数据请求逻辑
  }
}

方案2：配置路由强制重载组件 #

如果希望导航到game路由时直接重建组件，适配组件逻辑较轻的场景，可以修改路由配置：

1. 全局开启同路由重载（在app-routing.module.ts中修改）：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload', // 开启同路由导航时的重载逻辑
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 给game路由单独添加执行策略配置：

const routes: Routes = [
  // 其他路由配置
  {
    path: 'game', // 替换为实际的game路由路径
    component: GameComponent,
    runGuardsAndResolvers: 'always' // 每次路由命中都执行守卫、解析器，触发组件重建
  }
]

方案3：跳转后强制刷新页面（不推荐，存在白屏体验） #

如果不需要保留单页应用无刷新特性，可以修改导航逻辑，跳转完成后强制重载整个页面：

1. 给导航元素添加点击事件，替换纯routerLink跳转：

<mat-list-item 
  (click)="goToGamePage()"
  routerLinkActive="active"
>
  <mat-icon>games</mat-icon> GAMES
</mat-list-item>

2. 在对应组件中添加跳转方法：

goToGamePage() {
  this.router.navigate([this.routes.Gamecard]).then(() => {
    window.location.reload();
  });
}

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