web-dev-qa-db-ja.com

Angularゾーンの外でトリガーされたナビゲーション、「ngZone.run（）」の呼び出しを忘れましたか？

私はAngular 7を使用しており、ログイン後にAPI GETが正常に呼び出され、コンポーネントもデータを受信しますが、UIはそのデータを表示しません。

ブラウザコンソールを開くと、すぐにデータがUIに表示され、コンソールに警告が表示されます。

「core.js：15686ナビゲーションがAngularゾーンの外でトリガーされました。'ngZone.run（） 'の呼び出しを忘れましたか？」

この警告をグーグルで検索し、this.ngZone.run()などの回避策を見つけて、その中のAPIを呼び出しました。

しかし、問題は、40を超えるコンポーネントを使用しており、各コンポーネントで非常に多くのAPIを呼び出していることです。そのため、各API呼び出しでngZone.run()を呼び出す必要がありますが、これは難しいようです。

この問題を克服するためのより良いアプローチを提案してください。前もって感謝します。

app.component.ts

getEmployees(): void {
    this.employeeService.getEmployees().subscribe(e => {
        this.employees = e;
    });
}

app.service.ts

@Injectable()
export class EmployeeService {
    constructor(private httpClient: HttpClient) { }

    getEmployees() {
        return this.httpClient.get<EmployeeModel[]>('employees');
    }
angularangular-routerzonejs
24
Er Vipin Sharma

通常、これは、angularコードに関連しない外部JavaScriptからの外部jsコールバック内でangular呼び出しをラップしているときに発生します。

例app.component.ts：

callMyCustomJsLibrary() {
  googleSdk.getLocations(location => this.getEmployees());
}

getEmployees(): void {
    this.employeeService.getEmployees().subscribe(e => {
        this.employees = e;
    });
}

この場合、呼び出しをNgZoneに含める必要があります。例：this.ngZone.run(() => this.getEmployees());

app.component.tsは次のようになります。

callMyCustomJsLibrary() {
  googleSdk.getLocations(location => this.ngZone.run(() => this.getEmployees()));
}

getEmployees(): void {
    this.employeeService.getEmployees().subscribe(e => {
        this.employees = e;
    });
}
17
albanx

上から話す場合、この警告の意味は、イベントがゾーン外でトリガーされることです。つまり、zonesまたは実行コンテキストとも呼ばれるどのangularが変更検出とUIレンダリングに使用されます。 navigrationがangularによってUIを再レンダラーすることが期待されますが、ここで発生しているのは問題ではありません。実行されたコードがangularゾーン内にある場合、angularが変更検出とUIレンダリングを処理するため、この警告がスローされます。

しかし、実際には、この警告は、subscribeメソッド内でrouter navigrationを呼び出そうとすると発生します。

router navigation呼び出しをsubscribeメソッドの外側に置くと、この警告は再度スローされません。ナビゲーション後に期待されるUIが表示されます。

ゾーンの詳細については、以下のビデオを読んでご覧ください：

https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html#running-outside-angulars-zone

https://www.youtube.com/watch?v=3IqtmUscE_U&t=15

2
Sunny Goel

これは、カスタムメイドのサービスを注入しようとすると発生します。

constructor(private myService: MyService) {
}

モジュール構成で提供するのを忘れた場合：

@NgModule({
  providers: [
    MyService
  ]
0
Stephane