导航取消事件被触发的可能原因有哪些？

Question

我在angular2中订阅了路由器事件，当我在控制台中查看事件时，我发现一个带有reason: ""的NavigationCancel事件。想知道触发NavigationCancel的原因可能是什么。不仅仅是empty原因，而是总体上的原因。

- Ashish Ranjan

Answer 1

NavigationCancel 当你试图导航到一个路由时，如果它的子路由不能被加载（CanLoad守卫）或者路由本身不能被激活（CanActivate守卫），它就会被触发。

在配置RouterModule时，您可以使用{enableTracing:true}来查看所有事件，并进行进一步分析。

希望这可以帮助您！

- Madhu Ranjan

---

好的，谢谢：）我现在不在工作状态，明天会研究一下这个。 - Ashish Ranjan

好的，enableTracing 确实是一个非常好的配置。谢谢！ - Ashish Ranjan

你可以给这个点个赞：https://github.com/angular/angular/issues/22799 - DauleDK

Answer 2

虽然有点晚了，但我希望这能帮到其他人，因为我也曾经为此苦恼。

另一个可能导致这种情况的原因是导航事件被触发了两次。

这种情况发生在我身上是因为我有一个带有routerLink指令的组件，它有一个与之同名的输入绑定：

my-component类：

（以下内容请根据实际情况进行翻译）

@Input() routerLink: string[];

最初的回答

my-component模板：

...
<a [routerLink]="routerLink">
...

父组件模板如下：

原始答案：

...
<my-component
   [routerLink]="somePath"
   ...
>

实际上这是创建了另一个routerLink指令绑定。 结果导航事件会同时触发两次，几乎同时，从而产生NavigationCancel事件。

翻译后：

实际上这段代码创建了另一个routerLink指令的绑定。因此，导航事件会同时触发两次，几乎同时，从而产生NavigationCancel事件。

- ktsangop

Answer 3

简而言之：对于 Angular v10，搜索 navigateByUrl 和 navigate 的调用。

对于 Angular 10，即使最初的问题是针对 angular2 的，您仍然可能遇到此问题。我在这里搜索了 v10 的答案。

如 ktsangop 和 Madhu Ranjan 所提到的，当导航事件被触发两次时，就会出现这种情况。

如果您打开 enableTracing，您可能会看到以下内容：

NavigationStart {id: 2, url: '/', navigationTrigger: 'imperative', restoredState: null}

NavigationStart文档中指出：

强制触发器是对router.navigateByUrl()或router.navigate()的调用。

因此，您可以搜索这些函数的调用。

- danielmbarlow

Answer 4

在我的情况下，原因是一个空的子路径和额外的保护条件。

{
path: '',
canActivate: [AuthGuard],
component: Dashboard,
children: [
  {
    path: 'x',
    canActivate: [XGuard],
    component: XComponent
  },
  {
    path: '',
    canActivate: [YGuard],
    children: [
      {
        path: 'z',
        loadChildren: async () => ...,
        canActivate: [ZGuard],
      },
    ]
  }
]
}

在给定的示例中，必须同时满足 AuthGuard 和 YGuard 才能访问仪表盘组件。

- Christian