Angular：在包装器中呈现子组件

Question

我有一个称为SectionedPageComponent的组件。它期望一堆SectionComponent。部分组件具有标题且具有内容，例如：]

<app-sectioned-page>
  <app-section title="Section 1">I'm section 1</app-section>
  <app-section title="Section 2">I'm section 2</app-section>
</app-sectioned-page>

现在，我想将这些部分的标题显示为左侧的列表，而每个部分的内容都包装在右侧的元素中。

标题很简单：只需让孩子使用@ContentChildren(SectionComponent, {static: true})并从他们那里读取title属性。

但是，如何呈现这些以div包装的子项的内容？这样结果看起来像这样？

<app-sectioned-page>
  <div id="left">
    <ul>
      <li>Section 1</li>
      <li>Section 2</li>
    </ul>
  </div>
  <div id="right">
    <div class="wrapper">
      <h1>Section 1</h1>
      <app-section title="Section 1">I'm section 1</app-section>
    </div>
    <div class="wrapper">
      <h1>Section 2</h1>
      <app-section title="Section 2">I'm section 2</app-section>
    </div>
  </div>
</app-sectioned-page>

Answer 1

您可以在*ngFor中使用SectionedPageComponent：

<div id="right">
    <div class="wrapper" 
    *ngFor="let f of appSection">
        <h1>Section {{ f?.name }}</h1>
        <app-section title="Section 1">I'm section  {{ f?.name }}</app-section>        
    </div>
</div>