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>

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.

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>

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

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.

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?

回答1:

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

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

回答2:

To reuse HTML over multiple components without requiring a new component and still have it work in AOT, you can use macro functions in your templates.

In your simple case, you can export a const I18n_CLR_DG = "<clr-dg-column-toggle>...</>"; and just use use that within your template.

To avoid remembering to reference this in every template, you could create a macro function createClrDatagrid(options) that generates your HTML with an option to display the column selector depending on how much you'd need customize the HTML for the <clr-datagrid>.

来源：https://stackoverflow.com/questions/55813367/how-can-i-reuse-html-in-multiple-places-without-an-additional-component