如何在Angular中使用内容投影(又称翻译)

Question

我是角度4的新手.

我对角度4嵌入式组件有疑问.

例:

<hero-list>
    <hero></hero>
    <hero></hero>
</hero-list>

我想知道如何基于这个将组件嵌入到另一个组件中的结构来创建视图.

Answer 1

你应该<ng-content></ng-content>在你的组件中使用hero-list.所以你可以实现你的愿望.

英雄list.component.html

<div class="hero-list">
  <h1>Hero list</h1>
  <ng-content></ng-content>
</div>

现在你可以包装你hero-item的hero-list组件,它们将被打印在组件内部.

app.component.html

<hero-list>
  <hero-item></hero-item>
  <hero-item></hero-item>
</hero-list>

以下是工作示例:https://stackblitz.com/edit/angular-nvpmtc

而这里是关于angualr内容投影的好文章.