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

【问题标题】：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

标签： javascript angular angular7 angular-routing

【解决方案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);
}

【讨论】：