如何在没有额外组件的情况下在多个地方重用HTML
我目前正在尝试i18n菜单，以显示要显示的列。我意识到我可以使用下面的代码来定制它的文本。
<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似乎不是用来动态生成超文本标记语言的。
我想我可以使用dynamically create those components，但是重用一些HTML似乎需要做很多工作。我也认为我可以创建另一个组件，但是我讨厌仅仅为了重用HTML而向DOM添加bloat。特别是当DOM深度是你应该知道的使你的UI重排性能更好的first of 4 guidelines的时候。
我目前正在网格本身上创建一个指令，该指令通过查询clr-dg-column-toggle-title/clr-dg-column-toggle-button的DOM在视图呈现后将文本热交换为翻译后的文本。有没有更好的角度方式？
回答 2
Stack Overflow用户
发布于 2019-04-24 03:11:13
这不是问题本身的答案，而是我实际面临的问题的另一种解决方案。Clarity将提供一种不同的本地化字符串的方法，方法是让您在app.module提供程序中覆盖其翻译服务
providers: [{provide: ClrCommonStrings, useClass: MyCommonStringsService}]Stack Overflow用户
发布于 2019-05-07 01:32:16
要在不需要新组件的情况下在多个组件上重用超文本标记语言，并使其仍然在AOT中工作，您可以在模板中使用macro functions。
在您的简单示例中，您可以导出一个const I18n_CLR_DG = "<clr-dg-column-toggle>...</>";并在模板中使用它。
为了避免忘记在每个模板中引用它，您可以创建一个宏函数createClrDatagrid(options)，该函数生成您的超文本标记语言，并提供一个显示列选择器的选项，具体取决于您需要为<clr-datagrid>定制超文本标记语言的程度。
https://stackoverflow.com/questions/55813367
复制相似问题