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

发布时间：2020-12-17 17:43:44 所属栏目：安全来源：网络整理

导读：我正在努力使用Angular框架来使我的应用程序顺利运行,但我无法解决路由问题. 我有一个顶级AppComponent和app-routing.module.ts,它通过我的自定义SlideMenuComponent管理导航.我简化的AppComponent html模板： app-slide-menu [buttons]="menuButtons"/app-s

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

<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监督,该菜单将指向从服务器检索的特定CourseComponents的链接分页.这些组件驻留在他们自己的courses.module.ts模块中,他们自己的课程是routing.module.ts.但是,当我点击任何这些链接时,我会在Angular区域外触发导航,你是否忘记调用’ngZone.run()’？控制台警告,没有为打开的CourseCompontent调用ngOnInit(),并且它不会更新,直到我单击页面上的任何按钮.我通过router.navigate()手动导航时通过将此任务转发到NgZone.runTask(router.navigate())来解决此问题,但为什么会发生锚标记和routerLink direcrives？
这是我的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：

???

enter image description here

解决方法

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!