我什么时候应该使用“ngProjectAs”属性？

Question

我遇到了以下代码，其中ngProjectAs 属性在ng-container 中使用。它是做什么用的，解决了什么问题？

<mat-form-field [formGroup]="group">
  <input matInput [formControlName]="field.name">

  <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
    <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
  </ng-container>
</mat-form-field>

Answer 1

当我想在某个选择器下投射ng-container 时，我发现ngProjectAs 很有用。

Here你可以找到一篇关于它的短文。

想象一下你有这个组件：

@Component({
 selector: 'awesome-comp',
 template: `
  <ng-content select="[foo]"></ng-content>
 `
})
export class AwesomeComponent { }

consumer.component.html

如您所知，这就是您在 awesome-component 中投影内容的方式：

<awesome-comp>
 <p>Hello there!</p> 
</awesome-comp>

但是当您想在同一个选择器下投射更多元素/组件时会发生什么？

一种方法（不是真的推荐）是这样做：

<awesome-comp>
 <div foo>
  <h1> <!-- ... --> </h1>
   <p> <!-- ... --> </p>
 </div> 
</awesome-comp>

如您所见，我们添加了一个冗余 div，以便能够投影多个元素。

现在，ngProjectAs 是如何拯救这一天的：

<awesome-comp>
 <ng-container ngProjectAs='[foo]'>
  <h1> <!-- ... --> </h1>
   <p> <!-- ... --> </p>
 </ng-container> 
</awesome-comp>

上面的 sn-p 不会添加任何多余的包装元素。