Angular指令中的ExpressionChangedAfterItHasBeenCheckedError

Question

After I get all the hate, I know there's a thread about this problem but I haven't managed to find a solution for my problem. I'm a rookie. What I wanted to do was to change the nav header background only when the user is in a particular route, so I created a directive in which I retrieve the current url and then I styled the nav header with setElementStyle. For that I'm comparing if the current url matches a particular url that I store in a variable. The app is working fine but I still get that error.

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

Probably its not the best code ever but that's how I tried to resolve my problem, and probably there's a more elegant solution for this. Thanks for your help guys!

Answer 1

I prefer this way

First inject the Router in constructor, then return a function according to route

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

in your html

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

and in css

header.client{background-color:yellow}