angular - 我什么时候应该使用 "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 时很有用在某个选择器下。

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

想象一下你有这个组件:

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

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