Angular 2：NavigationCancel - 导航 ID 2 不等于当前导航 ID 3答案

【问题标题】：Angular 2: NavigationCancel - Navigation ID 2 is not equal to the current navigation id 3Angular 2：NavigationCancel - 导航 ID 2 不等于当前导航 ID 3
【发布时间】：2017-06-15 16:21:34
【问题描述】：

我正在尝试将旧 URL（电子邮件模板中的链接）从以前的站点重定向到另一个路径，如下所示：

if (route.url.indexOf('/#/') !== -1) {
    this.router.navigate(['/my-route']);
}

但是，导航被取消，原因如下：

Navigation ID 2 is not equal to the current navigation id 3.

查看 Angular 2 路由器源代码，当 id !== this.navigationId (https://github.com/angular/angular/blob/master/modules/@angular/router/src/router.ts#L652) 时，这发生在 runNavigate 方法中。我找不到有关navigationId 属性的任何信息，为什么会发生这种情况以及如何解决它。

现有路由之间的重定向似乎有效，但在这些旧的 hashmark URL 和现有路由之间无效。两个路由都必须存在于路由器中才能在它们之间进行重定向吗？

我们将不胜感激。

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

我们遇到了同样的错误。问题是一个自定义组件，其输入字段名为routerLink，用于自定义链接。但是这个字段导致Angular做了两次导航，导致'Navigation ID 2 is not equal to the current navigation id 3'的错误。

【讨论】：

【解决方案2】：

如果您通过 .ts 文件中的路由数组生成 routerLink。而且您的路线包含解析器...

<ng-container *ngFor="let route of Routes">
    This
   <div [routerLink]="route">{{route}}</div>
    and This
   <div [routerLink]="[route]">{{route}}</div>
    and this too
   <div routerLink="{{route}}">{{route}}</div>
</ng-container>

那么不要尝试这个...使用 resolver...它不会工作...

更安全的方法是在 ts 文件中创建一个函数。

navigate(link: string): void
  {
    this.router.navigate([link]);
  }

然后从 html 调用这个函数...像这样

<ng-container *ngFor="let route of Routes">
   <div (click)="navigate(route)">{{route}}</div>
</ng-container>

它会正常工作....快乐编码！！！

【讨论】：

你知道这是为什么吗？你是怎么想出来的？我正在从代码中的一系列路由生成菜单结构，我希望这些链接表现得像正确的 html 链接。我不认为这是一个太奇特的想法，所以我很感兴趣。

【解决方案3】：

我遇到了完全相同的问题，但找到了另一个原因来解释它。

这是因为我的锚链接上有一个 HTML 属性 href="#"，我的 onClick 方法调用了 router.navigate()。

这里有详细答案：

https://stackoverflow.com/a/61595269/3992814

【讨论】：

【解决方案4】：

我收到此错误是因为我快速连续调用了两次 router.navigate（1 次附加 queryParams，1 次附加片段）所以不得不重构我的代码只调用一次导航。

【讨论】：

我在应用程序的不同位置调用了两次导航。一个在 NgDestroy 上，另一个在我的效果中（NgRX）。这个答案很有帮助。