Как создать структурную директиву, аналогичную ngIf в Angular
Структурные директивы отвечают за макет HTML. Они формируют или изменяют структуру DOM, обычно добавляя, удаляя или манипулируя элементами.
Структурные директивы начинаются с символа *
. Когда angular видит директиву с префикса *
, он переводит атрибут *ngIf
в
элемент, обернутый вокруг элемента host, как показано ниже:
![](/static/storage/91522715967028271575711633503657788625.png)
Ниже приведена копия директивы ngIf, в которой мы проверяем, существует ли вход в директиву (здесь я не проверяю тип, поэтому, если значение равно, 0
оно не будет отображаться). Если он существует, то с помощью viewContainerRef
мы создаем EmbeddedView
, передавая шаблон внутри ng-template
.
![](/static/storage/62536926494771712393129826590390310213.png)
Здесь мы определяем свойство title
в нашем компоненте:
![](/static/storage/5720787573457558238577602080164145737.png)
Наконец, мы объявляем директиву в app.module.ts
.
![](/static/storage/304042142840783599578200313923104664734.png)
Вывод отображается в браузере, как показано ниже:
![](/static/storage/173459958669082264042896631127667259860.png)