Angular 17：NG0100 新控制流

Question

几周前，我们将 Angular 应用程序迁移到 Angular 17。在此过程中，我们还使用 Angular CLI 命令将所有控制流更改为新的内置控制流。这工作得很好，乍一看，一切都像以前一样。

但是，几天前我遇到了“NG0100：表达式在检查后已更改”，而更改之前没有错误。我正在努力寻找解决方案。

我们拥有的是一个带有BehaviorSubject 的组件。此BehaviorSubject 在子组件中用于向父组件提供有关其加载状态的信息。在 HTML 中，这看起来像这样：

@if (childComponentLoadingState$ | async; as childComponentLoadingState) {
  ...
  
  <mat-stepper linear #myStepper>
    <mat-step [completed]="isFirstStepCompleted(childComponentLoadingState)">
      ...
      <my-child-component [componentLoadingState$]="childComponentLoadingState$">
      </my-child-component>
      ...
    </mat-step> 
    ...
  </mat-stepper>

  ...
}

只要我们使用

*ngIf

，它就可以正常工作，并且我们没有收到任何错误。现在，在提供的实现中，我们在 mat-step 标记行中收到“NG0100：检查后表达式已更改”。

有人知道为什么现在出现错误以及我们如何解决它吗？感谢您的帮助！ :)

Answer 1

首先，新的角度控制流处于开发人员预览版中，因此不稳定稳定控制流。现在，如果您希望在不了解代码的情况下使用与更改检测有关的实验控制流 NG0100，我建议如下：

检查内容后
1. 手动检测更改
在您的主题上使用
2. RXJS 运算符来 detectChanges 例如管道 然后点击
恢复到
3. *ngIf 指令，因为它解决了您的问题并且稳定

import { ChangeDetectorRef } from '@angular/core';
    
constructor( private cdr: ChangeDetectorRef ) {}   
    
ngAfterContentChecked() {
    this.cdr.detectChanges();
}