我什么时候应该使用“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

ngProjectAs当我想ng-container在某个选择器下投影时，我觉得很有用。

在这里你可以找到一篇关于它的简短文章。

想象一下你有这个组件：

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

消费者.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>

上面的代码片段不会添加任何多余的包装器元素。