ExpressionChangedAfterItHasBeenCheckedError in Direktive mit Angular

Nachdem ich all den Hass bekommen habe, weiß ich, dass es einen Thread zu diesem Problem gibt, aber ich habe keine Lösung für mein Problem gefunden. Ich bin ein Anfänger. Was ich tun wollte, war, den Nav-Header Hintergrund nur zu ändern, wenn der Benutzer in einer bestimmten Route ist, also habe ich eine Direktive erstellt, in der ich die aktuelle URL abrufe und dann formatierte ich die Nav-Header mit setElementStyle. Dafür vergleiche ich, ob die aktuelle URL mit einer bestimmten URL übereinstimmt, die ich in einer Variablen ablege. Die App funktioniert gut, aber ich bekomme immer noch diesen Fehler.ExpressionChangedAfterItHasBeenCheckedError in Direktive mit Angular

Dies ist meine Richtlinie:

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'; 
     } 
    }); 
    } 
}

Wahrscheinlich jemals seinen nicht der beste Code, aber das ist, wie ich versuchte, mein Problem zu lösen, und wahrscheinlich eine elegantere Lösung für diese gibt. Danke für eure Hilfe!

Quelle

2017-09-23 Claudio Ramírez Guichard

Ich testete Sie Direktive und es funktioniert ohne Fehler. Ich würde jedoch die Rückkehr vor diesem.el.native .... entfernen und beide Stylings (bg color und color) im selben if() else() gruppieren. Auch ich denke, es ist schwer, wäre es einfacher, nur die Farbe von der Profilkomponente mit etwas CSS zu ändern? – Vega

Danke für deine Antwort @Vega Wie gesagt, vielleicht gibt es eine elegantere Lösung für mein Problem als eine Richtlinie zu erstellen, aber ich lerne nur. Vielleicht könntest du mir also zeigen, wie man die Farbe von der Profilkomponente mit CSS ändern kann. –

Wenn Sie neugierig sind, warum dieser Fehler auftritt, lesen Sie [Alles, was Sie über den 'ExpressionChangedAfterItHasBeenCheckedError'-Fehler wissen müssen] (https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangadennachfolgendem Fehler -error-e3fd9ce7dbb4) –

Ich ziehe es auf diese Weise

Zuerst wird die Router in Konstruktor injizieren, dann wieder eine Funktion nach Route

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

in Ihrem HTML

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

und in css

header.client{background-color:yellow}

Quelle

2017-09-23 20:22:01 Hareesh

ExpressionChangedAfterItHasBeenCheckedError in Direktive mit Angular

Antwort

Verwandte Themen