如何解决在 Angular 中再次单击父路由时如何刷新父路由及其组件?
我有一个 master-detail 容器组件,其中包含 2 个 展示组件 master 和 detail。用户将单击链接 http://localhost:4200/master
。 master 组件将从服务器检索数据并显示项目列表,并将 detail 组件导航到列表中的第一项。路线现在将更改为 http://localhost:4200/master/detail:1
。
现在用户可以返回并再次点击链接 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];
解决方法
最简单的修复方法是将名为 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。