Angular 如何在没有附加组件的情况下在多个位置重用HTML

我目前正在尝试打开菜单以显示要显示的列。我意识到我可以使用下面的内容来定制它的文本

{{'clr.dg.column.toggle.title'| translate}}
{{'clr.dg.column.toggle.selectAll'| translate}}

但是，我们有50多个网格，我希望避免将其复制粘贴到所有网格中。我怎样才能避免呢？这在反应上是很容易的，但角度的变化使它变得非常复杂

起初，我只是创建了一个返回HTML的函数，并从模板中调用它，但这在AOT中不起作用

接下来，我想我可以使用一个结构指令

但似乎不用于动态生成HTML

我想我可以，但重用一些HTML似乎需要做很多工作。 我还认为我可以创建另一个组件，但我讨厌仅仅为了重用HTML而向DOM添加膨胀。特别是当DOM深度是使UI回流性能更好的关键因素时，您应该注意这一点

---

我目前正在网格本身上创建一个指令，通过查询DOM中的

clr-dg-column-toggle-title/clr-dg-column-toggle按钮

，在视图呈现后，将文本热交换为翻译文本。有更好的角度吗？

这不是问题本身的答案，而是我实际面临的问题的不同解决方案。将提供一种不同的方式来本地化字符串，方法是让您在app.module providers中覆盖字符串的翻译服务

providers: [{provide: ClrCommonStrings, useClass: MyCommonStringsService}]

---

请参见

要在多个组件上重用HTML，而不需要新组件，并且仍能在AOT中工作，可以在模板中使用

在您的简单示例中，您可以导出一个

const I18n_CLR_DG=“…”并在模板中使用它

为了避免记住在每个模板中都引用它，您可以创建一个宏函数
createClrDatagrid（options）
，该函数生成HTML，并带有一个显示列选择器的选项，具体取决于您需要为
自定义HTML的程度。为什么不创建一个单独的组件呢
演示组件的思想是避免使用相同的HTML[和样式]=您需要的内容need@DDRamone因为我必须从Clarity复制/粘贴HTML/CSS？我不知道你在说什么，也请尽可能写一条评论。我真的很想更好地理解你想要实现的目标。对我来说，看起来您可以使用输入创建一个组件（将被重用-角度的方式），以提供将被转换的数据。通过这种方式，您可以在任何需要的地方注入组件。@AndrewRadulescu我在问题中解释了为什么它是HTML膨胀，使DOM变慢。我也不需要输入参数。在React中，您创建了另一个组件，但它不会使DOM变重/变慢
providers: [{provide: ClrCommonStrings, useClass: MyCommonStringsService}]