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

Question

我是 Angular 4 的新手。

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

示例：

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

我想知道如何基于此结构创建一个视图，该结构将组件嵌入到另一个组件中。

Answer 1

您应该在

<ng-content></ng-content>

组件中使用

hero-list

。这样你就可以实现上面的愿望了。

hero-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>

并且这里是一篇关于 angualr 中内容投影的好文章。

Answer 2

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

可能看起来像这样

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

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

Answer 3