何时应使用“ngprojectas”属性?

我发现 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>

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