#angular #angular2-directives #vmware-clarity
#angular #angular2-директивы #vmware-ясность
Вопрос:
В настоящее время я пытаюсь 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>
Но структурные директивы, похоже, не используются для динамической генерации HTML.
Я полагаю, что я мог бы динамически создавать эти компоненты, но, похоже, потребуется много работы для повторного использования некоторого HTML. Я также думал, что мог бы создать другой компонент, но я ненавижу добавлять раздувание в DOM только для повторного использования HTML. Особенно, когда глубина DOM является первым из 4 рекомендаций, о которых вы должны знать, чтобы улучшить работу вашего пользовательского интерфейса.
В настоящее время я создаю директиву в самой сетке, которая просто выполняет горячую замену текста на переведенный текст после отображения представления путем запроса DOM для clr-dg-column-toggle-title/clr-dg-column-toggle-button . Есть ли лучший способ Angular?
Комментарии:
1. почему бы вам не создать отдельный компонент?
<my-toggle-component title="title"></...>2. идея компонента презентации заключается в том, чтобы избегать одного и того же HTML [и стиля] = то, что вам нужно
3. @DDRamone Потому что мне придется копировать / вставлять HTML / CSS из Clarity? Не уверен, что вы говорите, также, пожалуйста, напишите один комментарий, когда это возможно.
4. Мне бы очень хотелось лучше понять, чего вы пытаетесь достичь. Для меня похоже, что вы можете создать компонент (который будет использоваться повторно — способ angular), используя входные данные для предоставления ваших данных, которые будут переведены. Таким образом, вы можете внедрить компонент везде, где вам нужно.
5. @AndrewRadulescu Я объяснил, почему в вопросе это раздувание HTML, замедляющее работу DOM. Мне также не нужны входные параметры. В React вы создаете другой компонент, но это не делает DOM тяжелее / медленнее
Ответ №1:
Это не ответ на сам вопрос, а другое решение проблемы, с которой я действительно столкнулся. Clarity предоставит другой способ локализации строк, если вы переопределите их службу перевода в app.module providers
providers: [{provide: ClrCommonStrings, useClass: MyCommonStringsService}]
Ответ №2:
Чтобы повторно использовать HTML поверх нескольких компонентов, не требуя нового компонента, и при этом заставить его работать в AOT, вы можете использовать макрофункции в своих шаблонах.
В вашем простом случае вы можете экспортировать const I18n_CLR_DG = "<clr-dg-column-toggle>...</>"; и просто использовать его в своем шаблоне.
Чтобы не забывать ссылаться на это в каждом шаблоне, вы могли бы создать макрофункцию createClrDatagrid(options) , которая генерирует ваш HTML с возможностью отображения селектора столбцов в зависимости от того, насколько вам нужно настроить HTML для <clr-datagrid> .