在 Angular 中使用 @if() {} 进行内容投影时发出警告 - ngtsc(-998011)

Question

 <mat-form-field>
                <input matInput 
                    type="text" 
                    id="confirmationKey" 
                    placeholder="code de confirmation"
                    formControlName="confirmationKey"
                >
                <mat-hint>Saisissez la clé de confirmation reçue par                  e-mail.</mat-hint>
                  @if(formErrorHandler.getErrorMsg(confirmationKeyControl?.errors); as errorMsg ){
                    **<mat-error>{{errorMsg}}</mat-error>**
                }
</mat-form-field>

警告信息：

Node 匹配“MatFormField”组件的“mat-error, [matError]”插槽，但不会被投影到特定插槽中，因为周围的 @if 在其根处有多个节点。要将节点投影到右侧插槽中，您可以：

1. 将 @if 块的内容包装在与“mat-error, [matError]”选择器匹配的内容中。
2. 将 @if 块的内容拆分为多个 @if 块，使得每个块的根仅具有一个可投影节点。
3. 删除 @if 块中的所有内容，除了正在投影的节点。

可以使用

extendedDiagnostics.checks.controlFlowPreventingContentProjection = "suppress" compiler option.

ngtsc(-998011)

禁用此检查

我尝试过的步骤：

我将 @if 块的内容包装在 an 中以匹配 mat-error 槽，但警告仍然存在。 我将逻辑分成单独的 @if 块，确保每个块只有一个可投影节点，但我仍然看到警告。

我不想禁用extendedDiagnostics.checks.controlFlowPreventingContentProjection =“抑制”。

在使用内容投影处理 @if 时我缺少什么？我如何正确构建它以消除警告？

Answer 1

**

你在开始和结束时都会弄乱角度编译器。也可能是一个错误，您可以通过在 Angular github 上创建问题来验证。

之前：

  @if(errorMessage(); as errorMsg ){ 
    **<mat-error>{{errorMsg}}</mat-error>** 
  }

之后：

  @if(errorMessage(); as errorMsg ){ 
    <mat-error>{{errorMsg}}</mat-error>
  }

Stackblitz 演示