Angular 指令中的 ExpressionChangedAfterItHasBeenCheckedError

Question

在我得到所有的仇恨之后，我知道有一个关于这个问题的帖子，但我还没有设法找到解决我的问题的方法。我是菜鸟。我想做的是仅当用户处于特定路线时才更改导航 header 背景，因此我创建了一个指令，在其中检索当前 url 然后我设置了导航 header 与 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

我更喜欢这种方式

先在constructor中注入Router，然后return根据route

注入一个函数

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

在你的 html

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

并在 css

header.client{background-color:yellow}

Angular 指令中的 ExpressionChangedAfterItHasBeenCheckedError

ExpressionChangedAfterItHasBeenCheckedError in Directive with Angular

css

angular-directive

angular