Давайте начнем обсуждение с типов директив, доступных в Angular. В Angular доступны два типа директив.
- Структурные директивы
Структурные директивы - это директивы, которые могут изменять структуру DOM и выполнять манипуляции с DOM.
2. Директивы по атрибутам
Директивы атрибутов - это директивы, которые могут изменять внешний вид или поведение элементов DOM и компонентов Angular.
Эта статья посвящена структурным директивам. Angular предоставляет несколько встроенных структурных директив, таких как NgIf, NgFor и NgSwitch. Давайте посмотрим на пример NgIf ниже: -
NgIf - это директива, которая отображает элемент, к которому он прикреплен, только если переданное ему условие истинно. Но давайте внимательно посмотрим на его синтаксис. В Angular директива называется только ngIf. Но здесь мы используем его со звездочкой (*).
Согласно официальной документации Angular: -
Синтаксис звездочки, * в структурной директиве, такой как * ngIf, является сокращением, которое Angular интерпретирует в более длинную форму. Angular преобразует звездочку перед структурной директивой в ‹ng-template›, который окружает основной элемент и его потомки.
Итак, согласно этому утверждению, Angular будет интерпретировать нашу DOM в приведенном выше фрагменте кода, как указано ниже.
Поэтому, даже если вы пишете свой код в форме ng-template, это то же самое, что писать * ngIf в div. Но давайте разберемся, почему Angular это делает.
Чтобы это понять, давайте попробуем создать аналогичную директиву. Если мы внимательно посмотрим на директиву ngIf, она удалит конкретный элемент DOM, если условие ложное. Но если мы применим эту директиву к селектору компонентов в шаблоне, это приведет к уничтожению компонента, если условие станет ложным. Итак, давайте попробуем решить эту проблему, создав структурную директиву, известную как ngShow, которая удалит элемент из DOM, но не уничтожит и не воссоздает его при последующих изменениях значений. Вместо этого он повторно добавит тот же экземпляр.
Давайте создадим эту директиву шаг за шагом.
- Команда Run.
Директива ng generate ngShow
2. Наш файл будет выглядеть так, как показано ниже.
3. Давайте добавим в директиву templateRef и viewContainerRef и введем вход, известный как ngShow.
Это основная причина, по которой Angular интерпретирует структурные директивы в форме ng-template, так что он может динамически встраивать шаблон или удалять его в зависимости от условия. А ViewContainerRef - это ссылка на контейнер, в котором будет создан шаблон.
4. Теперь давайте реализуем нашу директиву таким образом, чтобы после создания шаблона после дальнейшего изменения значения для условия он повторно использовал тот же шаблон вместо уничтожения и повторного создания.
Теперь, если внимательно посмотреть на строку №23, мы сохраняем ссылку на создание представления, когда условие было истинным в первый раз, а затем мы отключаем представление, когда условие ложно.
Отсоединение предотвращает разрушение представления и просто удаляет его. А позже мы повторно вставляем ту же самую viewRef для последующих истинных значений условия. Мы разрушаем это представление только тогда, когда уничтожается директива.
5. Теперь давайте используем эту директиву в том же примере компонента приложения вместо ngIf в div.
Это будет показывать и скрывать текст Hello каждые 2000 секунд без разрушения узла DOM, и то же самое будет применяться, если мы поместим эту директиву в селектор компонентов в шаблоне.
В настоящее время эта директива не поддерживает другое поведение, подобное директиве ngIf, но при желании мы можем настроить и это, добавив еще один вход в директиву и применив те же принципы. Но ngShow просто означает скрыть элемент, если условие ложное. Вот почему здесь этого не делается.
Структурные директивы - одна из приятных функций для выполнения манипуляций с DOM в angular. И если мы их достаточно поймем, мы сможем создать наши собственные структурные директивы для различных сценариев для выполнения манипуляций с DOM.
Чтобы узнать больше о структурных директивах, вы также можете ознакомиться с официальной документацией здесь: - https://angular.io/guide/structural-directives
Следуя ему, можно создавать различные типы структурных директив, даже что-то вроде ngFor основано на том же типе настройки.
