☰

ナビゲーションが Angular ゾーン外でトリガーされました。'ngZone.run()' を呼び出すのを忘れましたか? 質問する

tag-icon • tag-icon angular angular-router zonejs
ナビゲーションが Angular ゾーン外でトリガーされました。'ngZone.run()' を呼び出すのを忘れましたか? 質問する

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

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

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

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

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

この問題を克服するためのより良いアプローチは何でしょうか?

アプリコンポーネント

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

アプリ.サービス.ts

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

    getEmployees() {
        return this.httpClient.get<EmployeeModel[]>('employees');
    }

ベストアンサー1

通常、これは、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;
    });
}

おすすめ記事