标题可能有点误导,但它有点准确。
我有三个组成部分。有一个父组件(View
)和两个子组件(Accordion
和Panel
)。这两个子组件是彼此的对等组件。但是,我希望Panel
显示在Accordion
内,而不必在Panel
的{{1}}属性中注入Accordion
。我想避免这种情况的原因是因为并非应用程序中的每个directives
都有Accordion
。当Angular2还处于测试阶段时,我认为我已经实现了这一段时间,但忘了怎么做。我正在使用RC.4。
理论上,这将是一个理想的实施方式:
view.component.html
Panel
view.component.ts
<accordion title="View">
<panel></panel>
</accordion>
现在...
@Component({
...
directives: [
Accordion,
Panel
]
})
...
正在呈现,但Accordion
不是。我可以Panel
单独渲染。浏览器的控制台中没有抛出任何错误。
现在组件非常非常简单,因此没有太多代码可供展示。
答案 0 :(得分:2)
感谢@toskv向我提供参考资料。
我最终需要使用<ng-content></ng-content>
作为嵌套组件所在位置的占位符。就我而言,我希望所有嵌套的Accordion
内容都放在Accordion
正文中。我能够使用单个Panels
标记嵌套多个ng-content
。
这有效:
<强> accordion.component.html 强>
<div class="panel">
<div class="panel-heading">
<h3 (click)="toggle()">{{title}}</h3>
</div>
<div class="panel-body" [hidden]="collapsed">
<ng-content></ng-content>
</div>
</div>
<强> panel.component.html 强>
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
Title
</div>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<强> view.component.html 强>
<accordion title="Instances">
<panel></panel>
<panel></panel>
</accordion>