我如何在没有附加组件的情况下在多个地方重用HTML [英] How can I reuse HTML in multiple places without an additional component

问题描述

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

I'm currently trying to i18n the menu to display the columns to show. I realized I can use the following to customize its text.

<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使其变得非常复杂.

However, we have over 50 grids and I would like to avoid copy pasting this into all of them. How can I avoid that? This would be so easy in React, but Angular just makes it really complicated.

首先，我刚刚创建了一个返回HTML的函数，并从模板中对其进行了调用，但这在AOT中不起作用.

At first, I just created a function that returns that HTML and called it from the template, but that doesn't work in AOT.

接下来，我想我可以使用结构指令，而只需使用

Next, I thought I could use a structural directive and just use

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

但是结构指令似乎并未用于动态生成HTML.

But structural directives don't seem to be used for dynamically generating HTML.

我想我可以动态创建这些组件，但似乎像许多重复使用HTML的工作一样. 我还以为可以创建另一个组件，但是我讨厌为DOM重用而只是重用HTML.尤其是当DOM深度为 4条指南中的第一个时，请注意使您的UI重排性能更好.

I suppose I could dynamically create those components but it seems like a lot of work to reuse some HTML. I also thought I could create another component, but I hate adding bloat to the DOM just to reuse HTML. Especially when DOM depth is the first of 4 guidelines you should be aware of to make your UI reflows perform better.

我目前正在网格本身上创建一条指令，该指令仅在视图呈现后通过查询DOM中的clr-dg-column-toggle-title/clr-dg-column-toggle-button将文本热交换为翻译后的文本.有没有更好的Angular方法?

I currently am creating a directive on the grid itself that just hot swaps the text for translated text after the view has rendered by querying the DOM for clr-dg-column-toggle-title/clr-dg-column-toggle-button. Is there a better Angular way?

推荐答案

这不是对问题本身的答案，而是对我实际遇到的问题的另一种解决方案. 清晰度将提供一种不同的方式来本地化字符串，方法是让您在app.module提供程序中覆盖其翻译服务

This is not an answer to the question itself, but a different solution the the problem I actually faced. Clarity will provide a different way to localize strings by having you override their translation service in app.module providers

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

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

这篇关于我如何在没有附加组件的情况下在多个地方重用HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！