我如何在没有附加组件的情况下在多个地方重用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，并带有一个选项以显示列选择器，具体取决于您需要为{ {1}}。