Question

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

我使用了onSameUrlNavigation：“重新加载”，但这不起作用。

我的父路线文件 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是一个不同的组件，并且包含在该组件中。

感谢您的帮助。预先感谢！

Answer 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.

Answer 2

这种方法如何

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

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

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

2 个答案: