我在angular2
中订阅了路由器事件,当我在控制台中查看事件时,我发现一个带有reason: ""
的NavigationCancel
事件。想知道触发NavigationCancel
的原因可能是什么。不仅仅是empty
原因,而是总体上的原因。
我在angular2
中订阅了路由器事件,当我在控制台中查看事件时,我发现一个带有reason: ""
的NavigationCancel
事件。想知道触发NavigationCancel
的原因可能是什么。不仅仅是empty
原因,而是总体上的原因。
NavigationCancel
当你试图导航到一个路由时,如果它的子路由不能被加载(CanLoad守卫)或者路由本身不能被激活(CanActivate守卫),它就会被触发。
在配置RouterModule
时,您可以使用{enableTracing:true}
来查看所有事件,并进行进一步分析。
希望这可以帮助您!
虽然有点晚了,但我希望这能帮到其他人,因为我也曾经为此苦恼。
另一个可能导致这种情况的原因是导航事件被触发了两次。
这种情况发生在我身上是因为我有一个带有routerLink
指令的组件,它有一个与之同名的输入绑定:
my-component类:
(以下内容请根据实际情况进行翻译)
@Input() routerLink: string[];
my-component模板:
...
<a [routerLink]="routerLink">
...
原始答案:
...
<my-component
[routerLink]="somePath"
...
>
实际上这是创建了另一个routerLink
指令绑定。
结果导航事件会同时触发两次,几乎同时,从而产生NavigationCancel
事件。
翻译后:
实际上这段代码创建了另一个routerLink
指令的绑定。因此,导航事件会同时触发两次,几乎同时,从而产生NavigationCancel
事件。
简而言之:对于 Angular v10,搜索 navigateByUrl
和 navigate
的调用。
对于 Angular 10,即使最初的问题是针对 angular2
的,您仍然可能遇到此问题。我在这里搜索了 v10 的答案。
如 ktsangop 和 Madhu Ranjan 所提到的,当导航事件被触发两次时,就会出现这种情况。
如果您打开 enableTracing
,您可能会看到以下内容:
NavigationStart {id: 2, url: '/', navigationTrigger: 'imperative', restoredState: null}
强制触发器是对router.navigateByUrl()或router.navigate()的调用。
因此,您可以搜索这些函数的调用。
{
path: '',
canActivate: [AuthGuard],
component: Dashboard,
children: [
{
path: 'x',
canActivate: [XGuard],
component: XComponent
},
{
path: '',
canActivate: [YGuard],
children: [
{
path: 'z',
loadChildren: async () => ...,
canActivate: [ZGuard],
},
]
}
]
}
AuthGuard
和 YGuard
才能访问仪表盘组件。
enableTracing
确实是一个非常好的配置。谢谢! - Ashish Ranjan