Угловые советы | Используйте технику проекции для улучшения возможности повторного использования ваших компонентов ?

Повторное использование — это один из столпов разработки программного обеспечения и важный показатель, который информирует нас, среди прочего, о качестве архитектуры модуля, компонента, системы…

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>

Применяя эту технику, мы можем создавать компоненты, внешний вид и динамическое поведение которых зависит от параметров.

Улучшение возможности повторного использования: компонентная проекция

Используя предыдущие методы, нам удалось инкапсулировать небольшие блоки кода в компоненты, составить из них другие (композиция) и придать им различное поведение и внешний вид в зависимости от ряда предопределенных параметров.

Однако мы можем пойти еще дальше.

Представьте, что вы хотите создать макетс иерархией, которая может варьироваться помимо конфигураций с помощью параметров:

См. также:  IngressiveBabcock University: создание сообщества прогрессивных разработчиков.

Мы могли бы использовать технику композиции и параметризации, хотя мы бы ограничили параметры и заставили бы нас писать компоненты и шаблоны с единственной целью, чтобы их использовали в… возможно, одном компоненте?

Давайте посмотрим, как наш шаблон может использовать проекцию для создания компонента «карточка» (с его заголовком, телом и нижним колонтитулом):

// 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

 

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: