多种ng含量 [英] Multiple ng-content
本文介绍了多种ng含量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用Angular 6中的多个ng-content
构建自定义组件,但这无法正常工作,我也不知道为什么.
I am trying to build a custom component using multiple ng-content
in Angular 6, but this is not working and I have no idea why.
这是我的组件代码:
<div class="header-css-class">
<ng-content select="#header"></ng-content>
</div>
<div class="body-css-class">
<ng-content select="#body"></ng-content>
</div>
我试图在另一个地方使用此组件,并在body
和ng-content
的标头select
中呈现两个不同的HTML代码,如下所示:
I am trying to use this component in another place and render two different HTML code inside body
and header select
of ng-content
, something like this:
<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>
但是该组件呈现空白.
你们知道我可能做错了什么,还是在同一组件中呈现两个不同部分的最佳方法是什么?
Do you guys know what I could be doing wrong or what is the best way to render two different sections in same component?
谢谢!
推荐答案
- 您可以添加虚拟属性
header
和body
,而不是模板引用(#header, #body)
. - 然后将
ng-content
与select
属性(如select="[header]"
)一起使用.
- You could add dummy attributes
header
andbody
as opposed to template references(#header, #body)
. - And transclude using
ng-content
withselect
attribute likeselect="[header]"
.
app.comp.html
app.comp.html
<app-child>
<div header >This should be rendered in header selection of ng-content</div>
<div body >This should be rendered in body selection of ng-content</div>
</app-child>
child.comp.html
child.comp.html
<div class="header-css-class">
<ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
<ng-content select="[body]"></ng-content>
</div>
这篇关于多种ng含量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文