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

Posted 2023-03-13

【中文标题】一个 Angular 2 UI 组件的多种布局

【英文标题】：Multiple layouts for one Angular 2 UI Component

【发布时间】：2017-09-30 02:41:30

【问题描述】：

我想为具有不同布局的Angular >=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>

但这不是我需要的。因为这会让组件的用户非常困惑。

有什么想法吗？

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

提前致谢

【问题讨论】：

这听起来像是attribute directive 来简单地应用每个样式框架可能需要的类/组件/函数。然后实现会很好并且可读<ui-component material></ui-component>或<ui-component bootstrap></ui-component>。

@filoxo 你能在属性指令中添加一个模板吗？

没有。将指令视为无模板组件。但它可以用来动态创建一个可以传回主机的组件。我见过的一个很好的例子是Angular Material tooltip。如果这看起来太困难或没有必要，那么上面的内容可能只是组件上的@Inputs。

@filoxo 所以会有两个指令和两个组件，对吧？那么这是dynamic component loading 吗？是否可以根据缺少指令设置“默认”模板？

【参考方案1】：

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

复制他的评论：

这听起来像是一个属性指令，可以简单地应用每个样式框架可能需要的类/组件/函数。然后实现会很好并且可读<ui-component material></ui-component>或<ui-component bootstrap></ui-component>