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

Опубликовано в Angular • 11 октября 2019 г. • 1 мин. на чтение

Простоейшая структурная директива 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>

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