一个Angular 2 UI组件的多个布局

Question

我想创建 ui组件(例如datepicker(，用于 angular> = 2 不同的布局/strong>。例如：一种用于NG-Bootstrap，另一个用于Angular材料2。

我在考虑：

<div *ngIf="template === 1"> Bootstrap </div>
<div *ngIf="template === 2"> Angular Material </div>

不仅是丑陋的解决方案，我认为它不会起作用，因为ng-bootstrap和材料之间会发生冲突。

另一个解决方案是创建两个不同的组件：

<my-ng-bootstrap-component> Bootstrap </my-ng-bootstrap-component>
<my-material2-component> Angular Material </my-material2-component>

，但这不是我需要的。因为这对于组件的用户来说会很困惑。

有什么想法？

编辑：也应该在它们之间共享一些逻辑。可能继承？

预先感谢

Answer 1

@filoxo的最佳答案，但他删除了答案

从他的评论中复制：

听起来像是只需应用每个样式框架可能需要的类/组件/功能的属性指令。那么实现将是不错的，可读的<ui-component material></ui-component>或<ui-component bootstrap></ui-component>