我正在寻找在我的AppComponent中检测路由变化。
然后,我将检查全局用户令牌,以查看用户是否已登录,以便在用户未登录时重定向该用户。
我正在寻找在我的AppComponent中检测路由变化。
然后,我将检查全局用户令牌,以查看用户是否已登录,以便在用户未登录时重定向该用户。
当前回答
这里的答案是正确的路由器弃用。对于最新版本的路由器:
this.router.changes.forEach(() => {
// Do whatever in here
});
or
this.router.changes.subscribe(() => {
// Do whatever in here
});
要了解两者之间的区别,请查看这个SO问题。
Edit
对于最新的您必须做:
this.router.events.subscribe(event: Event => {
// Handle route change
});
其他回答
在花了一些时间寻找解决方案后,我找到了Angular 13.1.1的两个更新的变通方案:
第一选择:
constructor(private router: Router) {
router.events.forEach((event) => {
if (event instanceof NavigationStart) {
// Your code
// Use (event.url) to get URL that is being navigated
}
});
}
第二个选项
routerSubscription:订阅| undefined; 构造函数(私有路由器:router) {} ngAfterViewInit(): void { 这一点。routerSubscription = this.router.events.subscribe((event) => { if(事件实例of NavigationEnd) { //你的代码 //使用(event.url)获取正在导航的URL } }); }
记得取消订阅销毁循环
ngOnDestroy(): void {
this.routerSubscription?.unsubscribe();
}
还要根据您的情况注意是否更好地使用
事件实例的NavigationStart
or
事件实例的NavigationEnd
路由器3.0.0-beta。2应该是
this.router.events.subscribe(path => {
console.log('path = ', path);
});
只需在AppRoutingModule上进行更改
@NgModule({
imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
exports: [RouterModule]
})
this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this.showProgressBar = true
} else if (event instanceof NavigationEnd) {
this.showProgressBar = false
}
else if (event instanceof NavigationCancel) {
this.showProgressBar = false
}
})
您可以在任何事件路由状态下订阅
这里的答案是正确的路由器弃用。对于最新版本的路由器:
this.router.changes.forEach(() => {
// Do whatever in here
});
or
this.router.changes.subscribe(() => {
// Do whatever in here
});
要了解两者之间的区别,请查看这个SO问题。
Edit
对于最新的您必须做:
this.router.events.subscribe(event: Event => {
// Handle route change
});