如何在没有其他组件的情况下在多个位置重用HTML

Question

我正在尝试在菜单中显示要显示的列。我意识到我可以使用以下内容来自定义其文本。

<clr-dg-column-toggle>
    <clr-dg-column-toggle-title>{{‘clr.dg.column.toggle.title’ | translate}}
    </clr-dg-column-toggle-title>
    <clr-dg-column-toggle-button clrType = “selectAll”>{{‘clr.dg.column.toggle.selectAll’ | translate}}
    </clr-dg-column-toggle-button>
</clr-dg-column-toggle>

但是，我们有超过50个网格，我想避免复制粘贴到所有这些网格中。我怎么能避免这种情况？在React中这很容易，但Angular只是让它变得非常复杂。

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

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

<clr-dg-column-toggle *myCustomDirective></clr-dg-column-toggle>

但structural directives似乎没有用于动态生成HTML。

我想我可以使用dynamically create those components，但重用一些HTML似乎需要付出很多努力。我还以为我可以创建另一个组件，但我讨厌向DOM添加膨胀只是为了重用HTML。特别是当DOM深度是first of 4 guidelines时，你应该注意使你的UI回流表现更好。

我目前正在创建一个关于网格本身的指令，通过查询DOM以查找clr-dg-column-toggle-title/clr-dg-column-toggle-button，在呈现视图之后热交换翻译文本的文本。有更好的Angular方式吗？

Answer 1

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

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

见https://github.com/vmware/clarity/pull/3312

Answer 2

要在多个组件上重复使用HTML而不需要新组件并且仍然可以在AOT中使用它，您可以在模板中使用macro functions。

在您的简单情况下，您可以导出const I18n_CLR_DG = "<clr-dg-column-toggle>...</>";并在模板中使用它。

为了避免记住在每个模板中引用它，您可以创建一个宏函数createClrDatagrid(options)，它生成您的HTML，并显示列选择器，具体取决于您需要为<clr-datagrid>自定义HTML的程度。