时间戳

首页 > 解决方案 > 时间敏感管道导致 ExpressionChangedAfterItHasBeenCheckedError

angular - 时间敏感管道导致 ExpressionChangedAfterItHasBeenCheckedError

问题描述

在我的 Angular 12 应用程序中，我有一个列出文件的组件，并显示它们最近的更新时间。我使用管道将“新近度”格式化为“3 分钟前”格式（此处显示相关部分）：

@Pipe({
  name: 'ago',
  pure: false
})
export class TimeAgoPipe implements PipeTransform, OnDestroy {
  public constructor(private readonly changeDetectorRef: ChangeDetectorRef, private readonly ngZone: NgZone) { }
  public transform(value: number | string | Date) {
    [logic to calculate seconds...]
    return `${seconds} seconds ago`;
  }

然后在我的组件中，我大致有这样的东西：

<ul *ngFor="let file of files">
  <li>{{file.name}} (updated {{file.updatedDate | ago}})</li>
</ul>

这个管道显然可以处理几分钟、几天等，但是当时间真的很短时，我遇到了问题，因为管道创建的值经常变化。它被设置为不纯的，因为它的输出不是幂等的 - 这对我来说似乎是一个不纯管道的有效用例。ExpressionChangedAfterItHasBeenCheckedError例如，当检查从 7 秒到 8 秒滴答作响时，有时我会看到一个抛出的问题。

我了解ExpressionChangedAfterItHasBeenCheckedError在组件后面的代码正在更改绑定数据的大多数情况下是什么以及如何避免它，但是我无法找到任何有关当它由管道引起时该怎么做的信息。

有没有办法从管道中抑制错误或以不首先调用错误的方式实现所需的行为？（理想情况下没有ChangeDetectionStrategy.OnPush- 如果我能提供帮助，我真的不想对使用此管道的每个组件的更改检测策略负责）。

标签： angulartypescript

解决方案

推荐阅读