Angular - 在自定义组件中渲染组件

Question

我有以下代码：

<app-device [device]="device">
        <app-custom-slide-toggle></app-custom-slide-toggle>
        <app-custom-checkbox-list></app-custom-checkbox-list>
      </app-device>

如何在我的app-device组件内的特定位置显示我的app-custom-slide-toggle 、 app-custom-checkbox-list组件？

我正在阅读有关加载动态组件的信息，但不知道如何使其在复合组件中工作。

谢谢！

Answer 1

是内容投影。

<app-device [device]="device">
  <app-custom-slide-toggle slot-one></app-custom-slide-toggle>
  <app-custom-checkbox-list slot-two></app-custom-checkbox-list>
</app-device>

现在在AppDeviceComponent中，我们应该为内容创建插槽：

<!-- device.component.html -->
<div>
    <div class="slot-1">
        <ng-content select="[slot-one]"></ng-content>
    </div>
    <div class="slot-2">
        <ng-content select="[slot-two]"></ng-content>
    </div>
</div>

其他有详细描述的案例在这里。