ExpressionChangedAfterItHasBeenCheckedError dans la directive avec Angular

Après que je reçois toute la haine, je sais qu'il y a un fil à propos de ce problème mais je n'ai pas réussi à trouver une solution à mon problème. Je suis une recrue. Ce que je voulais faire était de changer l'arrière-plan de l'en-tête nav uniquement lorsque l'utilisateur est sur une route particulière, donc j'ai créé une directive dans laquelle je récupère l'URL actuelle et ensuite j'ai stylé l'en-tête nav avec setElementStyle. Pour cela, je compare si l'URL actuelle correspond à une URL particulière que je stocke dans une variable. L'application fonctionne bien, mais je reçois toujours cette erreur.ExpressionChangedAfterItHasBeenCheckedError dans la directive avec Angular

C'est ma directive:

import {Directive, ElementRef, Renderer, OnInit, ChangeDetectorRef} from '@angular/core'; 
import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router'; 
import 'rxjs/add/operator/filter'; 

@Directive({ 
    selector: '[styled]', 
}) 
export class StyledDirective implements OnInit { 

    constructor(public el: ElementRef, public renderer: Renderer, public _router: Router) { 
    renderer.setElementStyle(el.nativeElement, 'color', '#212121'); 
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'rgb(247, 247, 247)'); 
    } 

    ngOnInit(){ 
    const profileUrl = "/app/userprofile"; 
    this._router.events 
    .filter(event => event instanceof NavigationStart) 
    .subscribe((event:NavigationStart) => { 
     if (event.url == profileUrl) { 
     return this.el.nativeElement.style.backgroundColor = '#ffffff'; 
     } 
     else { 
     return this.el.nativeElement.style.backgroundColor = 'rgb(247, 247, 247)'; 
     } 
    }); 
    this._router.events 
    .filter(event => event instanceof NavigationStart) 
    .subscribe((event:NavigationStart) => { 
     if (event.url == profileUrl) { 
     return this.el.nativeElement.style.color = "#03A9F4"; 
     } 
     else { 
     return this.el.nativeElement.style.color = '#212121'; 
     } 
    }); 
    } 
}

Probablement son pas le meilleur mais jamais le code qui est comme j'ai essayé de résoudre mon problème, et probablement il y a une solution plus élégante pour cela. Merci pour votre aide les gars!

Source

2017-09-23 Claudio Ramírez Guichard

J'ai testé votre directive et cela fonctionne sans erreur. Je voudrais cependant supprimer le retour devant this.el.native .... et regrouper les deux styles (bg couleur et couleur) dans le même if() else(). Aussi, je pense que c'est un peu lourd, serait-il plus facile de simplement changer la couleur du composant de profil avec quelques css? – Vega

Merci pour votre réponse @Vega Comme je l'ai dit, il y a peut-être une solution plus élégante à mon problème que de créer une directive, mais je suis en train d'apprendre. Donc, peut-être que vous pourriez me guider sur la façon de changer la couleur du composant de profil avec css, s'il vous plaît. –

Si vous êtes curieux pourquoi cette erreur se produit lire [Tout ce que vous devez savoir sur l'erreur 'ExpressionChangedAfterItHasBeenCheckedError'] (https://blog.angularindepth.com/everything-you-need-ne-know-about-the-expressionchangedafteritasbeencheckederror -error-e3fd9ce7dbb4) –

Je préfère cette façon

d'abord injecter le Router dans le constructeur, puis retourner une fonction selon la voie

constructor(private router: Router) {} 
getRoute(){ 
     if (this.router.url === '/client'){ 
     return "client"; 
     } 
    }

dans votre html

<header [ngClass]="getRoute()">

et css

header.client{background-color:yellow}

Source

2017-09-23 20:22:01 Hareesh

ExpressionChangedAfterItHasBeenCheckedError dans la directive avec Angular

Répondre

Questions connexes