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

Question

我有一个 Master-Detail container component with 2 presentational components master 和 detail。用户将单击 link http://localhost:4200/master。 master 组件将从服务器检索数据并显示项目列表，并将 detail 组件导航到列表中的第一个项目.路线现在将更改为 http://localhost:4200/master/detail:1。

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

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

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

这是我当前的路线：

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

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

Answer 1

最简单的解决方法是将名为 onSameUrlNavigation 的路由器选项设置为 'reload'

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

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

编辑：为了ngOnInit到运行相同的url导航，您还需要相应地设置路由器的重用策略.

注入您的路由器（app.component 首选）：

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

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

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

How to refresh the parent route and it's components when it is clicked again in Angular?

angular-route-segment

angular