Angular中@if结合内容投影的ngtsc(-998011)警告解决问询

问题场景 #

你编写的Angular代码如下：

<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>

触发警告：节点匹配MatFormField组件的"mat-error, [matError]"插槽，但因外层@if的根节点不止一个，无法投影到指定插槽。官方提供三种解决方式，但你尝试前两种后警告仍未消除。

核心原因 #

你遇到的问题本质是：@if块的根节点数量超过1（大概率是块内的换行、空格被识别为空白文本节点，和<mat-error>共同构成了多个根节点），导致MatFormField无法正确识别并投影<mat-error>到指定插槽。

你可能忽略的细节 #

1. 空白节点的干扰：Angular的严格诊断检查会将模板中的换行、空格视为有效文本节点，这是最容易被忽略的点。
2. 方案1的正确理解：官方所说的「将@if块内容包裹在匹配选择器的元素中」，必须用<mat-error>作为外层容器，而非<div>等其他元素，否则无法匹配MatFormField的插槽选择器。

正确调整方案 #

方案1：消除@if块内的空白节点 #

将@if块内的代码紧凑编写，确保<mat-error>是@if的唯一直接子节点：

<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>

方案2：用<ng-container>隔离控制流逻辑 #

如果不想牺牲代码可读性，可通过<ng-container>承载@if控制流，让<mat-error>成为MatFormField的直接子节点：

<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>
    <ng-container>
        @if(formErrorHandler.getErrorMsg(confirmationKeyControl?.errors); as errorMsg ){
            <mat-error>{{errorMsg}}</mat-error>
        }
    </ng-container>
</mat-form-field>

方案3：切换为*ngIf旧语法 #

直接在<mat-error>上绑定显示条件，避免新控制流语法的节点干扰：

<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>
    <mat-error *ngIf="formErrorHandler.getErrorMsg(confirmationKeyControl?.errors) as errorMsg">{{errorMsg}}</mat-error>
</mat-form-field>

内容的提问来源于stack exchange，提问作者ALPHA