ExpressionChangedAfterItHasBeenCheckedError指令中的角度

当我得到所有的仇恨后，我知道有一个关于这个问题的线程，但我还没有设法找到我的问题的解决方案。我是一名新秀。我想做的只是当用户在一个特定的路由时更改导航头部背景，所以我创建了一个指令，在该指令中我检索当前的URL，然后使用setElementStyle设置了导航头部的样式。为此，我会比较当前网址是否与我存储在变量中的特定网址匹配。该应用程序工作正常，但我仍然得到该错误。ExpressionChangedAfterItHasBeenCheckedError指令中的角度

这是我的指令：

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

也许它不是最好的代码，但过这就是我试图解决我的问题，而且很可能有这个一个更好的解决方案。谢谢你们的帮助！

来源

2017-09-23 Claudio Ramírez Guichard

我测试了你的指令，它没有错误。我会尽管在this.el.native前面删除返回....并将两个样式（bg颜色和颜色）在相同的if（）else（）中进行分组。此外，我认为这是一种沉重的，只要改变一些css配置文件组件的颜色会更容易？ – Vega

感谢您的回答@Vega就像我说的，也许我的问题比创建一个指令更优雅的解决方案，但我只是在学习。所以，也许你可以引导我如何改变配置文件组件的颜色与CSS，请。 –

如果你好奇为什么会出现这个错误，请阅读[你需要知道的关于'ExpressionChangedAfterItHasBeenCheckedError'错误的所有信息]（https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror - 错误 - e3fd9ce7dbb4） –

我更喜欢这种方式

首先注入Router在构造函数，然后根据路线

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

在你的HTML返回功能

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

，并在CSS

header.client{background-color:yellow}

来源

2017-09-23 20:22:01 Hareesh

ExpressionChangedAfterItHasBeenCheckedError指令中的角度

回答

相关问题