我使用的是带有hashlocation策略的angular 2。
组件是用这个路由加载的:
"departments/:id/employees"
到目前为止还好。
在我成功批量保存多个编辑表行后,我想通过以下方式重新加载当前路由URL:
this.router.navigate([`departments/${this.id}/employees`]);
但是什么都没有发生,为什么?
我使用的是带有hashlocation策略的angular 2。
组件是用这个路由加载的:
"departments/:id/employees"
到目前为止还好。
在我成功批量保存多个编辑表行后,我想通过以下方式重新加载当前路由URL:
this.router.navigate([`departments/${this.id}/employees`]);
但是什么都没有发生,为什么?
当前回答
在控制器中创建一个重定向到预期路由的函数,如下所示
redirectTo(uri:string){
this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([uri]));
}
然后像这样使用它
this.redirectTo('//place your uri here');
该功能将重定向到一个虚拟路由,并在用户没有意识到的情况下快速返回到目标路由。
其他回答
我在Angular 11项目中使用这个:
reloadCurrentRoute() {
const currentUrl = this.router.url;
this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
this.router.navigate([currentUrl]);
});
}
PS:测试和工作在所有版本以上7。
从@angular/ Router中导入Router和ActivatedRoute
import { ActivatedRoute, Router } from '@angular/router';
注入Router和ActivatedRoute(以防你需要URL中的任何东西)
constructor(
private router: Router,
private route: ActivatedRoute,
) {}
从URL中获取所需的任何参数。
const appointmentId = this.route.snapshot.paramMap.get('appointmentIdentifier');
使用一个技巧,通过导航到一个虚拟url或主url,然后到实际url将刷新组件。
this.router.navigateByUrl('/appointments', { skipLocationChange: true }).then(() => {
this.router.navigate([`appointment/${appointmentId}`])
});
在你的情况下
const id= this.route.snapshot.paramMap.get('id');
this.router.navigateByUrl('/departments', { skipLocationChange: true }).then(() => {
this.router.navigate([`departments/${id}/employees`]);
});
如果你使用一个虚拟路由,那么你会看到一个标题闪烁'未找到',如果你已经实现了一个未找到的url,以防不匹配任何url。
这现在可以在Angular 5.1中使用Router配置中的onSameUrlNavigation属性来实现。
我已经添加了一个博客来解释如何在这里,但它的要点如下
https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
在路由器配置中启用onSameUrlNavigation选项,将其设置为“reload”。当你试图导航到一个已经激活的路由时,这将导致路由器触发一个事件循环。
@ngModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule],
})
在路由定义中,将runGuardsAndResolvers设置为always。这将告诉路由器总是启动守卫和解析器循环,触发相关事件。
export const routes: Routes = [
{
path: 'invites',
component: InviteComponent,
children: [
{
path: '',
loadChildren: './pages/invites/invites.module#InvitesModule',
},
],
canActivate: [AuthenticationGuard],
runGuardsAndResolvers: 'always',
}
]
最后,在您希望启用重新加载的每个组件中,都需要处理事件。这可以通过导入路由器、绑定事件并调用初始化方法来实现,该方法可以重置组件的状态并在需要时重新获取数据。
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();
}
}
}
所有这些步骤就绪后,您应该启用了路由重新加载。
有不同的方法来刷新当前路由
改变路由器的行为(从Angular 5.1开始) 设置路由器onSameUrlNavigation为“reload”。这将在相同的URL导航上发出路由器事件。
然后,您可以通过订阅路由来处理它们 您可以将它与runGuardsAndResolvers组合使用以重新运行解析器
不动路由器
在URL和中传递一个带有当前时间戳的刷新queryParam 订阅路由组件中的queryParams。 使用路由器出口的激活事件来获取一个 保持路由组件。
我已经在https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e下写了更详细的解释
希望这能有所帮助。
在route.navigate()的方法中实现OnInit并调用ngOnInit()
请看一个例子:
export class Component implements OnInit {
constructor() { }
refresh() {
this.router.navigate(['same-route-here']);
this.ngOnInit(); }
ngOnInit () {
}