如何在角度2中渲染子类组件？

Question

我有一个主类Module，它由许多子类扩展，如TextOnlyModule或ImageOnlyModule。

我有一个包含模块阵列的组件Preview。

这是一个小图：

我希望在预览模板中使用其子类模板呈现每个模块。在下面的示例中，模块是一个模块数组，我喜欢用模板呈现每个模块而不直接调用每个选择器，因为我不知道模块子类型。

<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');
    });
  }
}

这是一些plunkr：https://plnkr.co/edit/UtVpvnTHPiR675lztOcQ?p=preview。

希望它可以帮到你， 亨利