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>

其他有詳細描述的案例在這里。