一个 Angular 2 UI 组件的多个布局
Multiple layouts for one Angular 2 UI Component
我想为 Angular >=2[=35= 创建一个 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>
但这不是我需要的。因为这会让组件的用户感到非常困惑。
有什么想法吗？
编辑： 另外，它们之间应该共享一些逻辑。可能是继承？
提前致谢
来自@filoxo 的最佳答案，但他删除了他的答案
从他的评论中复制：
It sounds like maybe an attribute directive to simply apply the classes/components/functions that each style framework could need. Then the implementation would be nice and readable <ui-component material></ui-component> or <ui-component bootstrap></ui-component>
我想为 Angular >=2[=35= 创建一个 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>
但这不是我需要的。因为这会让组件的用户感到非常困惑。
有什么想法吗？
编辑： 另外，它们之间应该共享一些逻辑。可能是继承？
提前致谢
来自@filoxo 的最佳答案，但他删除了他的答案
从他的评论中复制：
It sounds like maybe an attribute directive to simply apply the classes/components/functions that each style framework could need. Then the implementation would be nice and readable
<ui-component material></ui-component>or<ui-component bootstrap></ui-component>