Angular 7 routerLink指令警告“在Angular区域外触发了导航" [英] Angular 7 routerLink directive warning 'Navigation triggered outside Angular zone'

问题描述

我正在努力使用Angular框架来使我的应用程序平稳运行，但是我无法解决路由问题. 我有一个顶级AppComponent和app-routing.module.ts，它们通过我的自定义SlideMenuComponent管理导航.我的AppComponent:

I am struggling with Angular framework to get my application run smoothly, but I can't resolve an issue with routing. I have a top level AppComponent and app-routing.module.ts which manage the navigation via my custom SlideMenuComponent. My simplified html template of AppComponent:

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

我的SlideMenuComponent具有以下html作为其核心:

My SlideMenuComponent has the following html as its core:

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

用户可以通过此幻灯片菜单导航到'/courses'，该菜单受CoursesComponent监督，该菜单将链接分配到从服务器检索到的特定CourseComponent的链接.这些组件位于自己的courses.module.ts模块中，而自己的courses-routing.module.ts.但是，当我单击任何这些链接时，都会得到Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?控制台警告，打开的CourseCompontent不会调用ngOnInit()，并且直到我单击页面上的任何按钮时，它都不会更新.手动导航通过router.navigate()时遇到了这个问题，该问题已通过将此任务转发到NgZone.runTask(router.navigate())而解决，但是为什么使用anchor标记和routerLink direcrives会发生这种情况? 这是我的CoursesComponent代码摘录:

A user can navigate to '/courses' through this slide menu, which is supervised by CoursesComponent that paginates links to a particular CourseComponents that are retrieved from the server. These components reside in their own courses.module.ts module whith their own courses-routing.module.ts. But when I click any of those links I get Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'? console warning, ngOnInit() is not called for openned CourseCompontent, and it doesn't update untill I click any of the buttons on the page. I had this issue when manually navigating via router.navigate() that was resolved by forwarding this task to NgZone.runTask(router.navigate()), but why does this happen with anchor tags and routerLink direcrives? Here is my CoursesComponent code excerpt:

<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:

A gif to demonstrate the issue:

推荐答案

它似乎存在错误，请尝试将其作为解决方法

It seens a bug, try this as an workaround

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

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

这篇关于Angular 7 routerLink指令警告“在Angular区域外触发了导航"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！