Angular 7 routerLink指令警告'在Angular zone外部触发导航'

Question

我正在努力使用Angular框架来使我的应用程序顺利运行,但我无法解决路由问题.我有一个顶级,AppComponent并app-routing.module.ts通过我的自定义管理导航SlideMenuComponent.我简化的html模板AppComponent:

<app-slide-menu [buttons]="menuButtons"></app-slide-menu>
<router-outlet></router-outlet>

我SlideMenuComponent的以下html为核心:

<nav><div *ngFor="let button of buttons">
    <a routerLink="{{button.routerLink}}"
    >{{button.name}}</a>
</div></nav>

用户可以导航'/courses'到此幻灯片菜单,该菜单由CoursesComponent分页指向由指向CourseComponent服务器检索的特定s的链接监督.这些组件位于各自的courses.module.ts模块中courses-routing.module.ts.但是,当我点击任何这些链接时,我会收到Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?控制台警告,ngOnInit()不会被打开CourseCompontent,并且它不会更新,直到我点击页面上的任何按钮.我router.navigate()通过转发此任务解决了手动导航时出现此问题NgZone.runTask(router.navigate()),但为什么会发生anchor标签和routerLinkdirecrives？这是我的CoursesComponent代码摘录:

<nav><ul>
        <li *ngFor="let course of api.data | paginate: {
            currentPage: currentPage, itemsPerPage: limit, totalItems: api.total
        }">
           <a
               [routerLink]="course._id"
               [queryParams]="{ page: '1', limit: '5' }"
           >
            {{course.name}} ({{course.description}})
           </a>
        </li>
</ul></nav>

用来证明这个问题的gif:

Answer 1

它会发现一个错误,尝试将其作为一种解决方法

constructor(private ngZone: NgZone, private router: Router) {}

public navigate(commands: any[]): void {
    this.ngZone.run(() => this.router.navigate(commands)).then();
}

Answer 2

我们在解决方案中的某个地方导航时遇到了这个错误。

在我们的侧边栏组件中，我们使用推送更改检测，并且我们this.ref.detectChanges()在路由发生时（参数更改）有一个，它以某种方式破坏了路由（可能将并行运行的解析器踢出 ngZone 或类似的东西）。将此更改为无论如何首选后，this.ref.markForCheck()此错误不再出现。我很高兴我们不需要解决方法，虽然奇怪的行为......

希望这可以帮助任何有同样问题的人。

Answer 3

由于没有公认的答案，而且我发现，使用 Angular 8，排名最高的答案不太有效，并且需要更多解释，我需要添加以下内容：

我的具体问题是与 ag-grid 相关，但我怀疑在 *ngFor 或其他情况下注入组件的任何地方都可能导致此问题。这与前面的答案非常接近，但是在导航函数中声明了一个字符串参数，然后调用navigateByUrl而不是navigate。

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  template: `<tag (click)="navigate(path)">clickable text</tag>`
})

constructor(private ngZone: NgZone, private router: Router) { }

public navigate(path: string): void {
  this.ngZone.run(() => this.router.navigateByUrl(path)).then();
}

你的里程可能会有所不同，但这对我来说效果很好。