如何在角度使用内容投影（又名transclusion）

Question

我是新角度4.

我有一个怀疑角4嵌入式组件。

例如：

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

我想知道如何创建基于此结构被嵌入另一个组件中分量的图。

Answer 1

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

英雄list.component.html

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

现在你可以用你的hero-item -components，他们将被打印hero-list构件的内部。

app.component.html

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

这里是工作示例：https://stackblitz.com/edit/angular-nvpmtc

而且here即将在angualr内容投影的好文章。

Answer 2

如果你的意思是你想有一个总体布局与子观点，你可能想看看角路由器https://angular.io/tutorial/toh-pt5

这可能会是这个样子

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

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