Повторное использование — это один из столпов разработки программного обеспечения и важный показатель, который информирует нас, среди прочего, о качестве архитектуры модуля, компонента, системы…
Angular предлагает архитектуру, основанную на веб-компонентах, с целью повышения качества проекта, повторного использования блоков кода, модульности…
Одними из наиболее известных методов написания наших компонентов являются Cкомпозиция и параметризация. С помощью этих методов мы можем инкапсулировать блоки кода друг в друга (порождая новые компоненты) и настраивать их внешний вид и поведение в соответствии с некоторыми параметрами.
Цель этой статьи — познакомитьс менее известнымметодом, улучшающим повторное использование компонентов: проекцией.
Пример композиции
// list.component.html <h1> List of items </h1> <item *ngFor=»let item of items»> </item> // item.component.html <div> <h2> {{ item.title }} </h2> <p> {{ item.text }} </p> </div>
Применяя эту технику, мы можем создавать компоненты, составляя другие.
Пример параметризации
// parameterized.component.ts @Component({ … }) export class ParametrizedComponent { @Input() param1: string; @Input() param2: boolean; constructor() {} } // parameterized.component.html <h1> {{ param1 }} </h1> <span *ngIf=»param2″ class=»badge badge-secondary»> New </span> // foo.component.html <h1> This is an example of ParameterizedComponent usage </h1> <parametrized [param1]=»This is a title» [param2]=»true»> </parameterized>
Применяя эту технику, мы можем создавать компоненты, внешний вид и динамическое поведение которых зависит от параметров.
Улучшение возможности повторного использования: компонентная проекция
Используя предыдущие методы, нам удалось инкапсулировать небольшие блоки кода в компоненты, составить из них другие (композиция) и придать им различное поведение и внешний вид в зависимости от ряда предопределенных параметров.
Однако мы можем пойти еще дальше.
Представьте, что вы хотите создать макетс иерархией, которая может варьироваться помимо конфигураций с помощью параметров:
Мы могли бы использовать технику композиции и параметризации, хотя мы бы ограничили параметры и заставили бы нас писать компоненты и шаблоны с единственной целью, чтобы их использовали в… возможно, одном компоненте?
Давайте посмотрим, как наш шаблон может использовать проекцию для создания компонента «карточка» (с его заголовком, телом и нижним колонтитулом):
// tree.component.html <card> <card-header> Some header </card-header> <card-body> <div class=»content»> <h2> Title </h2> <p> Lorem impsum… </p> <img src=»awesome-foo.png»> </div> </card-body> <card-footer> With love by @rjlopez </card-footer> </card>
Чтобы сделать возможным построение этой иерархии, мы будем использовать угловой тег ‹ng-content›. Этот тег позволяет нам загружать в компонент шаблон, который находится внутри тега нашего компонента.
// card.component.html <div class=»card text-center»> <ng-content select=»app-card-header»></ng-content> <ng-content select=»app-card-body»></ng-content> <ng-content select=»app-card-footer»></ng-content> </div> // card-header.component.html <div class=»card-header»> <ng-content></ng-content> </div>
В предыдущем предложении с помощью ‹ng-content› мы указываем, что компонент принимает встроенный HTML-тег. И какой тег вы принимаете? С помощью атрибута select мы информируем вас о том, что вы должны принимать теги типа ‹app-card-header›. В случае, если не будет передано какое-либо значение для «выбора», он примет все содержимое.
Выводы
Используя этот метод, мы можем создавать иерархические компоненты и меньше зависеть от других, что значительно улучшает возможность их повторного использования. В результате мы получим более гибкую архитектуру и увеличить степень повторного использования кода.
rjlopezdev-angular-projection — StackBlitz
Стартовый проект для приложений Angular с экспортом в Angular CLIstackblitz.com
Источник: