代码之家 › 专栏 › 技术社区 › Rafi Henig

何时应使用“ngprojectas”属性?

typescript angular

1

Rafi Henig · 技术社区 · 6 年前

我遇到了下面的代码 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>

1 回复 | 直到 6 年前

1

Andrei GÄtej 6 年前

我发现 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>
 </ng-container> 
</awesome-comp>

如您所见,我们正在添加冗余 div以便能够投影多个元素。

现在,这里是如何 ngprojectas项目 拯救一天:

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

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