在 Angular 中再次单击父路由时如何刷新父路由及其组件？

问题描述

我有一个 master-detail 容器组件，其中包含 2 个 展示组件 ma​​ster 和 detail。用户将单击链接 http://localhost:4200/master。 ma​​ster 组件将从服务器检索数据并显示项目列表，并将 detail 组件导航到列表中的第一项。路线现在将更改为 http://localhost:4200/master/detail:1。

现在用户可以返回并再次点击链接 http://localhost:4200/master。但是 ma​​ster 组件没有任何反应，也没有下载新数据。组件的行为就像它们被缓存一样。

如果用户再次点击 http://localhost:4200/master，我想刷新整个 master-detail。需要从服务器下载数据，并像用户第一次点击一样显示明细项。

我需要在组件或模块中进行哪些设置，以及需要对路由进行哪些更改才能实现？

这是我目前的路线：

const detailRoutes = [
  {
    path: 'detail/:id',component: DetailComponent
  }
];

const routes: Routes = [
{
  path: 'master',component: MasterComponent,children: [
    ...detailRoutes
  ],},...detailRoutes];

解决方法

最简单的修复方法是将名为 onSameUrlNavigation 的路由器选项设置为“重新加载”

@NgModule({
  imports: [RouterModule.forRoot(routes,{ onSameUrlNavigation: 'reload' })]
})
class MyNgModule {}

这将在您点击相同的 URL 时强制重新加载，就像您第一次导航到该路线一样。

编辑：为了让 ngOnInit 在同一个 url 导航上运行，您还需要相应地设置路由器的重用策略。

注入您的路由器（首选应用程序组件）：

import { Router } from '@angular/router';

constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}