Проекция контента является одной из основных функций Angular, она является наиболее известной. Официальная документация позволяет разобраться во всех тонкостях. В обычной работе программисты редко используют ng-content. Они отдают предпочтение усложненным перегруженным решениям, что создает дополнительные трудности при использовании и поддержке компонента.
В статье рассматриваются типовые кейсы для ng-content, которые находят применение при разработке многократно используемых компонентов.
Пример
При необходимости сделать галерею для показа фото с названием или без, возможностью их листания, с опциональной поддержкой пользовательских действий существует несколько вариантов реализации.
Минимальный вариант предполагает создание расположенного в рамке компонента, отображающего фото и зума. Сверху находится эмуляция окружения, оснащенная функцией перелистывания фото извне или добавления к ним описания.
При полных настройках реализована возможность перелистывания большого количества фотографий в подписями. Настройки позволяют ставить лайки и удалять.
Перед началом разработки следует учитывать, что изменение требований в дальнейшем сопровождается внесением обновлений в код. Любые обновления и дополнения приводят к усложнению компонента, в результате чего возникают трудности при его использовании и поддержке.
Альтернативным вариантом является предоставление гибкого компонента, внесение изменений в который не требует затрат. В таких случаях рекомендуется использовать ng-content.
Компоненты-конструкторы
Базовые возможности ng-content позволяют реализовать описанный пример простыми средствами. Компонент ng-content обеспечивает поддержку всех функций, который может реализовать разработчик:
- вставить фото;
- добавить к фото подпись;
- открыть PDF-файл;
- открыть видеоролик с Ютьюб в айфрейме.
Код для передачи картинки:
<section
#contentWrapper
class="wrapper"
... >
<ng-content></ng-content>
</section>
Компонент не предназначен для работы с большим массивом изображений. Он отображает размещенный извне контент. Элемент pagination может выносится наружу, пользователь может показывать счетчик и отслеживать его переключение.
Внутри preview необходимо только забить ячейку в верстке, что позволит реализовать функцию переключения контента.
Компонент preview-pagination отображает цифры i/n и этим изменение индекса.
Итоговый вариант кода для реализации проекта с галереей фото выглядит следующим образом:
<preview class="preview tui-space_top-5" [rotatable]="true">
<ng-container *ngIf="cats.length; else fallback">
<img width="500" [src]="cats[activeCat]" />
<label *ngIf="withDescription">
Cool cat #{{activeCat + 1}}
</label>
</ng-container>
<ng-template #fallback>
No cats, no party...
</ng-template>
<preview-pagination
[lastIndex]="cats.length - 1"
[(index)]="activeCat"
></preview-pagination>
<preview-title>cat{{activeCat + 1}}.jpg</preview-title>
<preview-action title="like"
icon="tuiIconHeart"
(click)=”likeCat(activeCat)
></preview-action>
<preview-action
title="remove"
icon="tuiIconTrash"
(click)="removeCat(activeCat)"
></preview-action>
</preview>
Компонент на ng-content отлично подстраивается под любые ситуации. Он может принимать любой контент извне, что значительно расширяет возможности для разработки. Проблему с загрузкой большого количества файлов для галереи решает передача другой цифры в pagination. Установка условие через *gif поможет добавить экшены. При наличии открываемого и неоткрываемого контента предусмотрен фоллбэк с объяснениями и кнопкой скачивания. Разработчики могут устанавливать свой контент в preview. Данное условие действует при соблюдении контракта селектора.
Важным преимуществом ng-content является возможность сжатия бандла приложения. При создании объемного компонента предусмотрена возможность поставки частей в отдельном модуле. В рассмотренном примере такими модулями являются preview-title, -action, -pagination и -loading. При необходимости проведения пагинации существует возможность импорта ее модуля с модулем preview. Компонент-конструктор позволяет использовать детали, необходимые в каждом конкретном случае.
Заключение
Добавление интерфейса для реализации единственного компонента накладывает определенные ограничения, последствия которых проявляются в процессе его использования. Компонент ng-content от Angular предлагает альтернативные пути решения. Его внедрение позволяет получать гибкое лаконичное решение, позволяющее реализовывать любые идеи разработчиков. Такой подход позволяет избежать заполнения болванки своими данными или необходимости проведения доработок при возникновении нестандартных ситуаций.
