web-dev-qa-db-ja.com

Angular 7 routerLinkディレクティブ警告 'ナビゲーションが外部でトリガーされましたAngular zone'

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'_に移動できます。このスライドメニューは、サーバーから取得された特定のCoursesComponentsへのリンクをページ分割するCourseComponentによって監視されます。これらのコンポーネントは、独自の_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タグとrouterLinkディレクトリでなぜこれが発生するのですか？これが私の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

angularangular-routingangular-routerangular7angular-routerlink
18
Veetaha

バグが見つかったので、これを回避策として試してください

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

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

受け入れられた回答がなく、見つけたのでAngular 8を使用して、上位にランクされた回答はうまく機能せず、もう少し説明が必要です。以下を追加します。

私の特定の問題はag-gridに関するものでしたが、* ngFor内など、コンポーネントが注入される場所がこの問題を引き起こす可能性があると思います。これは前の回答に非常に似ていますが、代わりに、navigate関数に文字列パラメーターを宣言し、navigateの代わりにnavigateByUrlを呼び出します。

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();
}

あなたの走行距離は異なる場合がありますが、これは私にとっては美しく機能しました。

2
iGanja

このバグは、ソリューション内のどこかに移動しているときに発生しました。

サイドバーコンポーネントでは、オンプッシュ変更検出を使用しており、ルーティングが発生したとき（パラメーターの変更）にthis.ref.detectChanges()が1つありました。これにより、ルーティングが壊れました（ngZoneから並列実行中のリゾルバーを蹴るか、または同様のもの）。これをとにかく優先するthis.ref.markForCheck()に変更した後、このバグは再び発生しなくなりました。回避策、奇妙な動作が必要なかったのはうれしいです。

これが同じ問題を抱えている人に役立つことを願っています。

1
fberthel