Question

我遇到了以下代码，其中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>属性。它的作用是什么，它要解决什么问题？

Directory

Answer 1

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

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>

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

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

1 个答案:

consumer.component.html