在同一导航单击上重新加载路由器组件 - 在导航单击上刷新页面

Posted 2023-02-22

【中文标题】在同一导航单击上重新加载路由器组件 - 在导航单击上刷新页面

【英文标题】：reload router component on same navigation click - refresh page on nav click

【发布时间】：2019-09-06 05:51:51

【问题描述】：

我有一个带有navbar 的页面，它使用延迟加载来加载子组件。现在，当我尝试单击同一页面/url 的nav 时，angular 什么都不做（这是默认行为）。我需要 nav 重新加载，以便如果用户在页面上选择了任何过滤器，它们将被清除。从而在导航栏点击时提供刷新功能。

我用onSameUrlNavigation: 'reload'，但它不起作用。

我的父路由文件app-routing.module.ts

const routes: Routes = [
   path: 'option1', loadChildren: './featureModules/option1/option1.module#option1Module', canActivate:[ActivateRouteGaurd]   ,                                            
   path: 'option2', loadChildren: './featureModules/option2/option2.module#option2Module', canActivate:[ActivateRouteGaurd]   ,
]

@NgModule(
  imports: [RouterModule.forRoot(routes,  useHash: true, onSameUrlNavigation: 'reload' )],
  exports: [RouterModule]
)

我的子路由器看起来像这样。 option1-routing.module.ts

const routes: Routes = [
   path: 'nav1', component: Nav1Component ,
   path: 'nav1/details/:id', component: ViewComponent , 
   path: 'nav2', component: Nav2Component ,
   path: 'nav2/details/:id', component: ViewComponent,
   path: 'nav3', component: Nav3Component ,
   path: 'nav3/add', component: AddComponent ,
   path: '', redirectTo: 'user', pathMatch: 'full' 
];

@NgModule(
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
)

我对此进行了很多搜索，但似乎没有任何效果。我不确定这是否可以从组件中实现，因为navbar 是一个不同的组件并且包含在组件中。

感谢任何帮助。提前致谢！

【问题讨论】：

你能在 stackblitz.com 上添加最小的、可重现的例子吗？

stackblitz 对我来说是受限的。

试试 plnk 或codesandbox.io

你试过使用 javascript 的 location.reload() 方法吗？有关文档，请参阅here

似乎有一张针对此问题的票。路线会重新加载，但组件不会。 github.com/angular/angular/issues/21115

【参考方案1】：

感谢大家的帮助。使用您的想法，我找到了解决方法。

    const that = this;
    const path = this.location.path();
    $('.navbar-nav li.nav-nav1').on('click', function (e) 
      that.router.navigateByUrl('/', skipLocationChange: true).then(() =>
          that.router.navigate([path])
      );
    );

This is taking my page to other url and then to my url which tricks angular to reload the component. 

【讨论】：

那是 Angular 中的 jQuery 吗？

【参考方案2】：

这个方法怎么样

<a [routerLink]="path" (click)="reload()">aaa</a>
<router-outlet *ngIf="view"></router-outlet>

reload()
  this.view=false;
  setTimeout(()=>this.view=true);