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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (47)

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

<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>

结构指令似乎不用于动态生成HTML。

我想我可以动态创建这些组件,但重用一些HTML似乎需要做很多工作。

我还以为我可以创建另一个组件,但我讨厌向DOM添加膨胀只是为了重用HTML。

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

提问于
用户回答回答于

我没有找到重用HTML问题的解决方案。但是,Clarity将通过覆盖app.module提供程序中的翻译服务来提供一种不同的本地化字符串方法

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

请参阅https://github.com/vmware/clarity/pull/3312

扫码关注云+社区

领取腾讯云代金券