Angular 7 routerLink 指令警告“在 Angular 区域外触发导航"

问题描述

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

<app-slide-menu [buttons]="menuButtons"></app-slide-menu><路由器插座></路由器插座>

我的 SlideMenuComponent 以以下 html 为核心:

<a routerLink="{{button.routerLink}}">{{button.name}}</a></div></nav>

用户可以通过这个滑动菜单导航到 '/courses'，它由 CoursesComponent 监督，它对特定 CourseComponent 的链接进行分页从服务器检索的 s.这些组件驻留在它们自己的 courses.module.ts 模块中，并带有它们自己的 courses-routing.module.ts.但是，当我单击这些链接中的任何一个时，我会在 Angular 区域外触发 Navigation，您是否忘记调用 'ngZone.run()'? 控制台警告，ngOnInit() 是不需要打开 CourseCompontent，它不会更新，直到我点击页面上的任何按钮.我在通过 router.navigate() 手动导航时遇到了这个问题，通过将此任务转发到 NgZone.runTask(router.navigate()) 解决了这个问题，但为什么会这样anchor 标签和 routerLink 指令会发生什么?这是我的 CoursesComponent 代码摘录:

<li *ngFor="let course of api.data | 分页:{currentPage:currentPage，itemsPerPage:限制，totalItems:api.total}">
 解决方案 
它看到了一个错误，试试这个作为解决方法
constructor(private ngZone: NgZone, private router: Router) {}公共导航(命令:任何[]):无效{this.ngZone.run(() => this.router.navigate(commands)).then();}
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>
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>
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>
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 区域外触发导航"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！