css - Angular 指令中的 ExpressionChangedAfterItHasBeenCheckedError

Question

在我得到所有的仇恨之后，我知道有一个关于这个问题的线程，但我还没有设法找到解决我的问题的方法。我是菜鸟。我想做的是仅当用户处于特定路线时才更改导航标题背景，因此我创建了一个指令，在其中检索当前 url，然后使用 setElementStyle 设置导航标题的样式。为此，我正在比较当前 url 是否与我存储在变量中的特定 url 匹配。该应用程序运行良好，但我仍然遇到该错误。

这是我的指令:

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

可能它不是有史以来最好的代码，但这是我试图解决我的问题的方式，并且可能有更优雅的解决方案。感谢您的帮助!

Answer 1

我喜欢这样

首先注入(inject) Router在构造函数中，然后根据路由返回一个函数

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

在你的 html 中

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

在CSS中

header.client{background-color:yellow}