Про структурные директивы 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ов.
Для примера директива суммы 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>