Navigasi dipicu di luar zona Angular, apakah Anda lupa memanggil 'ngZone.run()'?

Biasanya ini terjadi ketika Anda membungkus panggilan sudut di dalam beberapa panggilan balik js eksternal, dari JavaScript eksternal yang tidak terkait dengan kode sudut.

Contoh 1_:

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

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

Dalam hal ini Anda harus memasukkan panggilan ke NgZone, contoh: this.ngZone.run(() => this.getEmployees());

app.component.ts kemudian akan terlihat seperti berikut:

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

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

Masalah saya diperbaiki dengan menggabungkan perintah navigasi router di ngZone. Silakan periksa kode di bawah ini

di konstruktor tambahkan zona pribadi: NgZone.

private zone: NgZone

this.zone.run(() => {
                    this.router.navigate(['/login']);
                });

Kalau saya bicara dari atas maka maksud dari peringatan ini adalah event tersebut dipicu di luar zona. Angular menggunakan zona, juga disebut konteks eksekusi untuk deteksi perubahan dan rendering UI. Jadi saat menavigasi, Angular berharap untuk merender ulang UI tetapi hal itu tidak terjadi di sini. Itulah masalah yang Anda hadapi. Jadi peringatan ini muncul karena Angular sedang memproses deteksi perubahan dan rendering UI ketika kode yang dieksekusi terletak di dalam zona Angular.

Namun sebenarnya, peringatan ini muncul ketika Anda mencoba memanggil navigasi router di dalam metode berlangganan.

Jika Anda melakukan panggilan navigasi router di luar metode subscribe maka peringatan ini tidak akan muncul lagi dan Anda akan melihat UI yang diharapkan setelah navigasi.

Untuk informasi lebih lanjut tentang zona, baca dan tonton video di bawah ini:

https://blog.thinktram.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=150

Saya memiliki masalah yang sama. Ini berhasil untuk saya, Anda memiliki dua cara:

Bentuk pertama:

document.location.href=`/component/${param}/...`

Masalahnya adalah ini akan memuat ulang seluruh aplikasi dan membuatnya lebih lambat

Metode kedua:

Impor ini

import { Router } from '@angular/router';
import { Component, NgZone } from '@angular/core';

konstruktor:

 constructor(private _ngZone: NgZone, private _router: Router) { }


  goTo(comp, param){
    this._ngZone.run(()=>{
    this._router.navigate([comp, param])
    });
  }

Jadi ketika Anda ingin membuka komponen Anda, cukup:

this.goTo("/myComponent", "my-param-value");

Saya harap ini berhasil untuk Anda

Solusi Kerja - PERBAIKI

 ngAfterViewInit(): void {
    let self = this;
      this.platform.backButton.subscribe(() => {
      console.log("back preseed \n \n");

      self._ngZone.runOutsideAngular(() => {
        setTimeout(() => {
          self.Router.navigateByUrl("/stock-management");
        }, 100);
      });
    });
  }

Ini terjadi jika Anda mencoba memasukkan layanan yang dibuat khusus:

constructor(private myService: MyService) {
}

sementara Anda lupa menyediakannya dalam konfigurasi modul:

@NgModule({
  providers: [
    MyService
  ]