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

Question

我想使用不同的布局为 Angular＆gt; = 2 创建 UI组件（如日期选择器）。例如：一个用于ng-bootstrap，另一个用于Angular Material 2.

我在想这个：

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

这不仅是一个难看的解决方案，但我认为它不会起作用，因为ng-bootstrap和material2之间会发生冲突。

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

<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>