多个组件使用相同的 templateurl答案

【问题标题】：multiple components using the same templateurl多个组件使用相同的 templateurl
【发布时间】：2021-09-20 10:00:31
【问题描述】：

我正在尝试为这个问题找到最佳解决方案，基本上我有 4 个组件使用完全相同的 html，但 ts 文件中的逻辑不同。

我需要的是具有相同 html 模板的 4 个组件。

可以为多个组件使用相同的templateUrl 吗？如果不是，实现相同效果的最佳方法是什么？

我正在使用角度 12。

【问题讨论】：

标签： angular controls custom-controls

【解决方案1】：

可以使用相同的templateUrl，您可能需要对文件夹结构进行一些调整。

例如你可以做类似的事情

├── myComponent
│   └── myComponent.html
│       myComponent1
│       ├── myComponent1.ts
│       └── myComponent1.spec.ts
│       myComponent2
│       ├── myComponent2.ts
│       └── myComponent2.spec.ts

其他可能性（当您在逻辑上也有相似之处时使用）是拥有基本组件并在子组件中扩展它，例如：

.
├── myComponent
│   ├── myComponent.base.ts
│   └── myComponent.html
│       myComponent1
│       ├── myComponent1.ts (extends myComponent.base.ts)
│       └── myComponent1.spec.ts
│       myComponent2
│       ├── myComponent2.ts (extends myComponent.base.ts)
│       └── myComponent2.spec.ts

【讨论】：

这算不算糟糕的设计？对我来说就是这样，如果它会对我的项目产生什么样的影响？
糟糕的设计是什么意思？从应用程序的外部部分来看，它只是一个组件，它不会关心模板从哪里获取，在它内部按预期重用模板，它对项目没有影响它只是构建组件的示例。
当然示例是最小的，它不包含模块和应用程序的外部部分，这完全取决于您的用例。