Как я могу повторно использовать HTML в нескольких местах без дополнительного компонента - PullRequest
Новая
       42

Как я могу повторно использовать HTML в нескольких местах без дополнительного компонента

2 голосов
/ 23 апреля 2019

Я сейчас пытаюсь открыть меню для отображения столбцов.Я понял, что могу использовать следующее, чтобы настроить его текст.

enter image description here

<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 - это первое из 4 указаний , о которых вы должны знать, чтобы улучшить работу вашего интерфейса пользователя.

В настоящее время я создаю директиву на самой сетке, которая просто выполняет горячую заменутекст для переведенного текста после отображения представления путем запроса DOM для clr-dg-column-toggle-title/clr-dg-column-toggle-button.Есть ли лучший Угловой способ?

Ответы [ 2 ]

1 голос
/ 23 апреля 2019

Это не ответ на сам вопрос, а другое решение проблемы, с которой я фактически столкнулся. Clarity предоставит другой способ локализации строк, если вы переопределите их службу перевода в поставщиках app.module 

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

См. https://github.com/vmware/clarity/pull/3312

0 голосов
/ 06 мая 2019

Чтобы повторно использовать HTML в нескольких компонентах, не требуя нового компонента, и при этом он работает в AOT, вы можете использовать макрофункции в своих шаблонах.

В вашем простом случае вы можете экспортировать const I18n_CLR_DG = "<clr-dg-column-toggle>...</>"; и просто использовать его в своем шаблоне.

Чтобы не забыть ссылаться на это в каждом шаблоне, вы можете создать макрофункцию createClrDatagrid(options), которая генерирует ваш HTML с возможностью отображать селектор столбца в зависимости от того, насколько вам нужно настроить HTML для <clr-datagrid> .

...