如何在 Angular 中使用内容投影（又名嵌入）

Question

我是 angular 4.

的新手

我对angular 4个嵌入式组件有疑问。

示例：

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

我想知道如何基于将组件嵌入另一个组件的结构创建视图。

Answer 1

如果你的意思是你想要一个带有子视图的主布局，你可能想看看 Angular 路由器 https://angular.io/tutorial/toh-pt5

可能看起来像这样

<app-component>
  <h1>Static title</h1>
  <router-outlet></router-outlet>
</app-component>

当导航到不同的链接时，router-outlet 会在你的路由文件中定义的不同组件之间切换，但它周围的 html 不会改变

Answer 2

您应该在 hero-list 组件中使用 <ng-content></ng-content>。这样就可以实现上面的愿望了。

英雄-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>

here 是一篇关于 angualr 内容投影的好文章。

How to use content projection (aka transclusion) in Angular