web-dev-qa-db-fra.com

La navigation a été déclenchée en dehors de la zone Angular, avez-vous oublié d'appeler 'ngZone.run ()'?

J'utilise Angular 7 et suis confronté à un problème => après la connexion aux appels d'API GET et au composant recevant des données également, mais l'interface utilisateur n'affiche pas ces données.

Lorsque j'ouvre la console du navigateur, les données sont immédiatement renseignées sur l'interface utilisateur et un avertissement s'affiche dans la console.

"core.js: 15686 La navigation a été déclenchée en dehors de la zone Angular, avez-vous oublié d'appeler 'ngZone.run ()'?"

J'ai googlé cet avertissement et trouvé une solution de contournement comme this.ngZone.run() et j'appelle mon API à l'intérieur.

Mais le problème, c’est que j’utilise plus de 40 composants et que j’appelle autant d’API dans chaque composant. Je dois donc appeler ngZone.run() à chaque appel de l'API, ce qui semble difficile à faire.

S'il vous plaît, suggérez-moi la meilleure approche pour surmonter ce problème. Merci d'avance.

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

Cela se produit généralement lorsque vous encapsulez angular appels dans un callback externe Js, à partir de JavaScript externe non lié au code angular.

Exemple app.component.ts:

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

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

Dans ce cas, vous devrez inclure l'appel dans la NgZone, exemple: this.ngZone.run(() => this.getEmployees());

Le app.component.ts ressemblerait alors à ceci:

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

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

Si je parle de haut alors le sens de cet avertissement est que l'événement est un déclencheur en dehors de la zone, c'est-à-dire si vous connaissez les zones ou également appelé contexte d'exécution lequel angular est utilisé pour la détection des modifications et le rendu de l'interface utilisateur . Ainsi, alors que navigration il est attendu par le angular de rendre l'interface utilisateur mais cela ne se produit pas ici, c'est le problème auquel vous êtes confronté . il lance donc cet avertissement car angular traite la détection de modification et le rendu de l'interface utilisateur lorsque le code exécuté se situe à l'intérieur de la zone angular.

Mais en réalité, cet avertissement survient lorsque vous essayez d’appeler le navigration du routeur à l’intérieur du subscribe méthode.

Mettez votre routeur de navigation en dehors de la méthode subscribe et il ne lancera plus cet avertissement. et vous verrez l'interface utilisateur attendue après la navigation.

pour plus d'informations sur les zones, lisez et regardez la vidéo ci-dessous: -

https://blog.blingtram.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

Cela se produit si vous essayez d’injecter un service personnalisé:

constructor(private myService: MyService) {
}

pendant que vous avez oublié de le fournir dans la configuration du module:

@NgModule({
  providers: [
    MyService
  ]
0
Stephane