0

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

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

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

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

这是我目前的路线：

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

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

1 回答 1

1

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

@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;
}
于 2021-08-01T05:07:47.723 回答