如何使用angular 2路由器重新加载当前路由 [英] How to reload the current route with the angular 2 router

问题描述

我正在使用带有散列分配策略的angular 2.

I am using angular 2 with hashlocation strategy.

该组件已加载该路由:

"departments/:id/employees"

到目前为止很好.

在成功批量保存了多个已编辑的表格行之后，我想通过以下方式重新加载当前路由网址:

After I do a successfull batch save of multiple edited table rows I want to reload the current route url via:

this.router.navigate([`departments/${this.id}/employees`]);

但是什么也没发生，为什么?

But nothing happens, why?

推荐答案

现在可以在Angular 5.1中使用Router config的onSameUrlNavigation属性完成此操作.

This can now be done in Angular 5.1 using the onSameUrlNavigation property of the Router config.

我添加了一个博客，解释了如何在此处进行操作，但其要旨如下

I have added a blog explaining how here but the gist of it is as follows

https://medium.com/inline-in-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

在路由器配置中启用onSameUrlNavigation选项，将其设置为'reload'.当您尝试导航到已处于活动状态的路由时，这将导致路由器触发事件​​循环.

In your router config enable onSameUrlNavigation option, setting it to 'reload'. This causes the Router to fire an events cycle when you try to navigate to a route that is active already.

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
 exports: [RouterModule],
 })

在路由定义中，将runGuardsAndResolvers设置为always.这将告诉路由器始终启动警卫和分解程序周期，并触发相关事件.

In your route definitions, set runGuardsAndResolvers to always. This will tell the router to always kick off the guards and resolvers cycles, firing associated events.

export const routes: Routes = [
 {
   path: 'invites',
   component: InviteComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/invites/invites.module#InvitesModule',
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 }
]

最后，在您要启用重新加载的每个组件中，您需要处理事件.这可以通过导入路由器，绑定到事件并调用初始化方法来完成，该方法可以重置组件的状态并在需要时重新获取数据.

Finally, in each component that you would like to enable reloading, you need to handle the events. This can be done by importing the router, binding onto the events and invoking an initialisation method that resets the state of your component and re-fetches data if required.

export class InviteComponent implements OnInit, OnDestroy {
 navigationSubscription;     

 constructor(
   // … your declarations here
   private router: Router,
 ) {
   // subscribe to the router events. Store the subscription so we can
   // unsubscribe later.
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // If it is a NavigationEnd event re-initalise the component
     if (e instanceof NavigationEnd) {
       this.initialiseInvites();
     }
   });
 }

 initialiseInvites() {
   // Set default values and re-fetch any data you need.
 }

 ngOnDestroy() {
   if (this.navigationSubscription) {
     this.navigationSubscription.unsubscribe();
   }
 }
}

完成所有这些步骤后，您应该启用路由重载.

With all of these steps in place, you should have route reloading enabled.

这篇关于如何使用angular 2路由器重新加载当前路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！