Это мой первый пост из серии под названием «Все аспекты Angular». Сегодня мы поговорим о структурной директиве * ngIf
Хотя мы все знаем, как использовать * ngIf / [ngIf], давайте на секунду перейдем к определению Angular.
«Структурная директива, которая условно включает шаблон, основанный на значении выражения, приведенного к Boolean. ”
Итак, в общих чертах, ngIf - это простая директива, которая будет отображать во время выполнения по значению условия. Так как же это работает в реальном времени?
ngIf на самом деле является сеттером (ссылка). как только новое значение передается в сеттер, он перейдет в действие, чтобы проверить, нужно ли ему отображать элемент html или нет, используя сеттер вместо ngOnChanges, angular получает более точный и менее подверженный ошибкам код. только работающая функциональность после изменения значения условия ngIf.
В директиве ngIf наиболее важной функцией является _updateView ()
Каждый @Input () будет генерировать эту функцию. так как же ngIf решает отобразить HTML?
если условие является истинным значением (!! значение), оно сначала очистит любой существующий код в представлении, и если есть шаблон для рендеринга, он отобразит его, см. диаграмму ниже для более наглядного объяснения приведенного выше кода.
Когда ngIf решает отобразить наш html, он использует ViewContainerRef, который представляет контейнер, к которому может быть прикреплено несколько компонентов, и знает, где он находится в дереве DOM (вот почему он отображает его в правильное место, а не случайным образом на странице).
Функция createEmbeddedView ViewContainerRef примет соответствующий шаблон и контекст ngIf в качестве параметров и отобразит шаблон / код в требуемом месте и разместит его на странице. и, очевидно, при необходимости выполняются на протяжении всего жизненного цикла компонентов.
На заметку:
1. если для ng не указан конкретный шаблон, если он будет использовать блок кода, в который он был помещен.
<div *ngIf="condition"> hello world </div>
ngIf будет использовать элемент div в качестве шаблона (именно так мы обычно его используем)
2. вы можете явно использовать 2 разных шаблона, один для then, а другой для else
3. Каждый раз, когда компонент класса визуализируется в результате выполнения условия ngIf, он сам сбрасывает его и запускает жизненные циклы компонентов, такие как onInit. поэтому убедитесь, что у вас нет утечек памяти.
