Про структурные директивы Angular

Простоейшая структурная директива show, аналог ngIf

@Directive({
  selector: '[show]',
})
export class ShowDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set show(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}
<div *show="condition">Будет отрисовано, если condition = true.</div>

Из директивы можно отправить "привет" вторым параметром отправив объект.

this.viewContainer.createEmbeddedView(this.templateRef, { hello: 'Привет из директивы' });

Терминологически правильно это называется контекст.

<div *show="condition; let message = hello">Из директивы пришло {{ message }}</div>

В специальное свойство $implicit отправляется значение по-умолчанию для шаблонных переменных.

this.viewContainer.createEmbeddedView(this.templateRef, {
    $implicit: 'Попадет в любой let без =',
    hello: 'Привет из директивы'
});
<div *show="condition; let m1; let m2; let m3"> m1, m2, m3 будет содержать "Попадет в любой let без ="</div>

Директива может принимать несколько Inputов.

domain-specific-language.png

Для примера директива суммы 2 слагаемых:

@Directive({
  selector: '[sum]',
})
export class SumDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input('sumFrom')
  from = 0;

  @Input('sumAnd')
  and = 0;

  ngOnInit(): void {
    this.viewContainer.createEmbeddedView(this.templateRef, {
      $implicit: this.from + this.and,
    });
  }
}

Пример использования:

<div *sum="let result from 2 and 3" >Сумма 2 + 3 = {{ result }}</div>

Похожие записи

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

Angular URL Matcher

Функция сопоставления маршрута с URL-адресами. Возможность динамически подбирать компонент для маршрута

04 октября 2020 г. в Angular

Вложенные формы Angular

Рассматриваются варианты встраивания форм, позволяющие переиспользовать набор полей вводе со своей логикой. @Input() родительской формы, @Output() дочерней формы, ViewChild(), ControlValueAccessor, ControlContainer

Angular. Отличие baseHref от deployUrl

  • deployUrl - задаёт путь для статических (js, css) файлов в index.html.
  • baseHref - определяет base, используется в ссылках и маршрутизации (routing) Angular