一个组件的Angular 2+多个HTML模板答案

【问题标题】：Angular 2+ multiple HTML template for one component一个组件的Angular 2+多个HTML模板
【发布时间】：2019-12-27 18:20:08
【问题描述】：

我有以下情况。我正在编写一个使用三个 js 的复杂组件：

该组件管理复杂的鼠标交互并使用两种数据绑定更新 DOM 中的其他元素：变量、JSON 对象、鼠标交互等。

我开始在我的应用程序的几个部分中使用该组件，但我需要对threed-viewer.html 进行大量修改，因此我制作了整个组件的副本，最终导致难以维护的重复项。

组件的所有风格共享 80% 的 javascript 代码和绑定，但它们在 UI 上有很大的不同。所以我想创建不同的 3 个基本组件（最少的 javascript 代码），我可以使用选择器和变量将它们注入到 threed-viewer.html 中来决定要加载哪个模板：

这不会编译，因为 html 文件具有来自原始组件的所有变量和绑定，但它们不存在于 typescript 文件中。另一种解决方案可能是通过 ngIf 管理单个 html，但这会导致文件冗长、混乱且难以管理。这是我在 Angular 中的唯一选择吗？还有什么想法吗？

谢谢。

【问题讨论】：

【解决方案1】：

我很久以前就做过 - 页面和文章编辑器。两个不同的模板，相同的代码。

我将文章组件用作“父级”，并将其扩展到新闻编辑器。

看起来像这样：

@Component({template: 'blah blah blah'}) export class parent {}
@Component({template: 'blah2 blah2 blah2'}) export class child extends parent {}

希望这是您正在寻找的解决方案。两个不同的组件，两个模板，一个代码。当然，您可以为这两个“父”抽象类保存所需的所有方法。

这是 OOP 宝贝 ;)

【讨论】：

【解决方案2】：

您可以拥有一个共享服务，然后添加三个不同的组件，但 js 代码不会被复制，因为它会在服务中。使用服务变量、函数和对象在所有 3 个组件中使用双向绑定

【讨论】：