我遇到了以下代码，其中使用了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>
ngProjectAs当我想ng-container在某个选择器下投影一个对象时，我觉得很有用。
在这里您可以找到有关它的简短文章。
假设您有以下组件：
@Component({
selector: 'awesome-comp',
template: `
<ng-content select="[foo]"></ng-content>
`
})
export class AwesomeComponent { }
如您所知，这就是您在其中投影内容的方式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>
上面的代码段不会添加任何多余的包装器元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句