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

Posted on by

Структурные директивы – директивы изменяющие DOM. Синтаксис начинается со специального символа – * . Мы уже знаем что в Angular существуют такие структурные директивы как *ngIf и *ngFor.

Самый лучший на мой взгляд пример структурной директивы на данный момент предоставлен командой rangle.io: директива, которая задает задержку перед выводом компонента, то есть, например:

[javascript]
<card *appDelay="5000"></card>
[/javascript]

– элемент card будет выведен(добавлен в DOM) через 5 секунд.

В исходном коде директивы нет ничего сложного:

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
@Directive({
selector: '[appDelay]'
})
export class DelayDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef
) { }
@Input() set appDelay(time: number): void {
setTimeout(()=>{
this.viewContainerRef.createEmbeddedView(this.templateRef);
}, time);
}
}
view raw angular-structural-directive.js hosted with ❤ by GitHub

Нужно понимать, что весь компонент, к которому применена структурная директива удаляется из DOM и заносится в templateRef, после чего мы можем управлять его поведением.

Полный код примера.