angular - ExpressionChangedAfterItHasBeenCheckedError 带有 ngClass 并且没有子组件

Question

我正在尝试使用自定义逻辑将活动类应用于我的路由，routerLinkActive但由于某种原因无法正常工作（可能是我的父路由和子路由是动态的）。这是代码：

<ul class="navbar-nav">
   <li class="nav-item eds-service"
     *ngFor="let service of services"
     [routerLink]="['', _dataService.flavor, service]"
     [ngClass]="{'active': _urlService.getCurrentService() === service}"
     (click)="changeService(service)">
     {{ service | readableName | titlecase }}
   </li>
</ul>

我的路由文件如下所示：

{ path: ':flavor', component: ComparePageComponent },
{ path: ':flavor/:service', component: ComparePageComponent }

当我加载页面时，我收到以下错误：

ServicesComponent.html:10 ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“活动：假”。当前值：“活动：真”。

我尝试使用AfterViewInit, AfterViewChecked，但无济于事。

我哪里错了？

标签： angularangular6angular-changedetection

Answer 1

尝试这个：

public constructor(private changeDetector: ChangeDetectorRef) {}

public ngAfterViewInit(): void {
    this.changeDetector.detectChanges();
}

见这里：https ://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4