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

Posted 2023-03-13

【中文标题】Angular 2：NavigationCancel - 导航 ID 2 不等于当前导航 ID 3

【英文标题】：Angular 2: NavigationCancel - Navigation ID 2 is not equal to the current navigation 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 和现有路由之间无效。两个路由都必须存在于路由器中才能在它们之间进行重定向吗？

我们将不胜感激。

【参考方案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://***.com/a/61595269/3992814

【参考方案4】：

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

【讨论】：

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