Question

标题可能有点误导，但它有点准确。

我有三个组成部分。有一个父组件（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单独渲染。浏览器的控制台中没有抛出任何错误。

现在组件非常非常简单，因此没有太多代码可供展示。

Answer 1

感谢@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>

Angular2嵌套组件可能没有依赖注入？

1 个答案: