如何在角度2中渲染子類組件？

Question

我有一個主類Module，它由許多子類擴展，例如TextOnlyModule或ImageOnlyModule。

我有一個預覽組件，其中包含一個模塊數組。

這是一個小圖：

我想在預覽模板中使用其子類模板渲染每個Module。 在下面的示例中，模塊是一個模塊數組，我想通過其模板渲染每個模塊而無需直接調用每個選擇器，因為我不知道Module子類型。

<div *NgFor="#module in modules">
    {{module}}
</div>

有什么辦法嗎？

謝謝。

Answer 1

也許您可以使用DynamicComponentLoader類在Preview組件中以編程方式執行此操作：

@Component({
  (...)
  template: `
    <div #someContainer></div>
  `
})
export class Preview {
  constructor(dcl:DynamicComponentLoader,eltRef:ElementRef) {
    this.modules = ...

    this.modules.forEach((module) => {
      dcl.loadIntoLocation(module, eltRef, 'someContainer');
    });
  }
}

這是一些插件： https ://plnkr.co/edit/UtVpvnTHPiR675lztOcQ ? p = preview。

希望對您有幫助，蒂埃里