当组件属性取决于当前日期时间时，如何管理Angular2“检查后表达式已更改”异常

Question

我的组件具有取决于当前日期时间的样式。在我的组件中，我有以下功能。

   private fontColor( dto : Dto ) : string {
    // date d'exécution du dto
    let dtoDate : Date = new Date( dto.LastExecution );

    (...)

    let color =  "hsl( " + hue + ", 80%, " + (maxLigness - lightnessAmp) + "%)";

    return color;
  }

lightnessAmp 从当前日期时间计算。如果 dtoDate 在过去 24 小时内，颜色会发生变化。

确切的错误如下：

检查后表达式已更改。以前的值：’hsl(123, 80%, 49%)‘。当前值：’hsl(123, 80%, 48%)’

我知道只有在检查值时才会在开发模式下出现异常。如果检查的值与更新的值不同，则抛出异常。

所以我尝试在下面的钩子方法中更新每个生命周期的当前日期时间，以防止出现异常：

   ngAfterViewChecked()
  {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
  }

…但没有成功。

原文由 Anthony Brenelière 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更改后显式运行更改检测：

 import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  console.log( "! changement de la date du composant !" );
  this.dateNow = new Date();
  this.cdRef.detectChanges();
}

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将您的代码从 ngAfterViewInit 移动到 ngAfterContentInit 。

视图在内容之后初始化，因此在 ngAfterViewInit() 之后调用 ngAfterContentInit()

原文由 Achraf Farouky 发布，翻译遵循 CC BY-SA 4.0 许可协议