没有与垫误差，NG-模板和渲染* ngTemplateOutlet

Question

此代码工作正常和正常（无ngTemplateOutlet）：

<mat-form-field [formGroup]="formGroup">
    <input matInput type="text"
        [formControlName]="fControlName"
    >
  <ng-container *ngIf="isShowErrors()" ngProjectAs="mat-error">
    <ng-container *ngFor="let error of showSMErrors" >
      <mat-error>{{ error.message }}</mat-error>
    </ng-container>
  </ng-container>
</mat-form-field>

但是这个代码心不是正常工作（与ngTemplateOutlet），为什么呢？ （只是看到像一个正常的红色文字，则返回Error.message）：

<mat-form-field [formGroup]="formGroup">
    <input matInput type="text"
        [formControlName]="fControlName"
    >
  <ng-container *ngTemplateOutlet="showErrorsTemplate"></ng-container>
</mat-form-field>

<ng-template #showErrorsTemplate ngProjectAs="mat-error">
  <ng-container *ngIf="isShowErrors()" >
    <ng-container *ngFor="let error of showSMErrors" >
      <mat-error>{{ error.message }}</mat-error>
    </ng-container>
  </ng-container>
</ng-template>

有任何想法吗？谢谢！

Answer 1

就像在这个answer这里提到：

该<mat-error>元素必须<mat-form-field>的直接孩子才能正常工作。

所以，像在这个问题的答案，在这里作为的情况下单独的组件，它也适用于这里：设置你的容器mat-error标签内，它会工作得很好！

<mat-form-field [formGroup]="formGroup">
  <input matInput type="text" [formControlName]="fControlName">
  <mat-error>
    <ng-container *ngTemplateOutlet="showErrorsTemplate"></ng-container>
  </mat-error>
</mat-form-field>

然后意味着你不需要使用mat-error你ng-template内。