[英]How to use content projection (aka transclusion) in Angular
I am new to angular 4. 我刚接触Angular 4。
I have a doubt in angular 4 embedded components. 我对Angle 4嵌入式组件有疑问。
example: 例:
<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. 我想知道如何基于将组件嵌入另一个组件中的这种结构创建视图。
You should use <ng-content></ng-content>
in your hero-list
-component. 您应该在hero-list
使用<ng-content></ng-content>
。 So you can realize your wish above. 这样您就可以实现您的愿望。
hero-list.component.html hero-list.component.html
<div class="hero-list">
<h1>Hero list</h1>
<ng-content></ng-content>
</div>
And now you can wrap your hero-item
-components and they will be printed inside of hero-list
component. 现在,您可以包装您的hero-item
-components,它们将被打印在hero-list
组件中。
app.component.html app.component.html
<hero-list>
<hero-item></hero-item>
<hero-item></hero-item>
</hero-list>
Here is working example: https://stackblitz.com/edit/angular-nvpmtc 这是工作示例: https : //stackblitz.com/edit/angular-nvpmtc
And here is a good article about content projection in angualr. 这是一篇关于angualr中内容投影的好文章。
If you mean you want a master layout with sub views, you might want to look at the Angular router https://angular.io/tutorial/toh-pt5 如果您想使用主视图和子视图,则可能需要查看Angular路由器https://angular.io/tutorial/toh-pt5
Which might look something like this 可能看起来像这样
<app-component>
<h1>Static title</h1>
<router-outlet></router-outlet>
</app-component>
The router-outlet will switch between different components defined in your routing file when navigating to different links, but the html around it won't change 导航至不同链接时,路由器插座将在路由文件中定义的不同组件之间切换,但是其周围的html不会改变
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.