如何在Angular中使用内容投影(又名包含) [英] How to use content projection (aka transclusion) in Angular
问题描述
我对角度4还是陌生的.
I am new to angular 4.
我对有角的4个嵌入式组件有疑问.
I have a doubt in angular 4 embedded components.
示例:
<hero-list>
<hero></hero>
<hero></hero>
</hero-list>
我想知道如何基于将组件嵌入另一个组件中的这种结构来创建视图.
I wanted to know how to create a view based on this structure that is embedding component inside another component.
推荐答案
您应该在hero-list
-组件中使用<ng-content></ng-content>
.这样您就可以在上面实现您的愿望.
You should use <ng-content></ng-content>
in your hero-list
-component. So you can realize your wish above.
hero-list.component.html
<div class="hero-list">
<h1>Hero list</h1>
<ng-content></ng-content>
</div>
现在您可以包装您的hero-item
-组件,它们将被打印在hero-list
组件内部.
And now you can wrap your hero-item
-components and they will be printed inside of hero-list
component.
app.component.html
<hero-list>
<hero-item></hero-item>
<hero-item></hero-item>
</hero-list>
这是工作示例: https://stackblitz.com/edit/angular-nvpmtc
此处是一篇有关内容投影的好文章在Angualr中.
And here is a good article about content projection in angualr.
这篇关于如何在Angular中使用内容投影(又名包含)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!