В этой статье вы познакомитесь с шаблоном структурных директив в Angular, узнаете, что такое структурная директива и как ее использовать. Надеюсь, она будет вам полезна!
Вход в курс повышения квалификации по интерфейсу (vue): введите обучение
В Angular есть два типа директив. Директивы атрибутов изменяют внешний вид или поведение элементов DOM . Структурные директивы добавляют или удаляют элементы DOM .
Структурные директивы — одна из самых мощных функций Angular , однако их часто понимают неправильно.
Если вам интересно узнать о структурных директивах, давайте читаем дальше и выясним, что это такое, для чего они используются и как их использовать в ваших проектах. [Рекомендуемые связанные учебные пособия: «учебник по Angular»]
В этой статье вы узнаете о шаблоне структурных директив Angular . Вы узнаете, что они собой представляют и как их использовать.
Изучив эту статью, вы лучше поймете эти инструкции и сможете использовать их в реальных проектах.
Структурные директивы Angular — это директивы, которые могут изменить структуру DOM . Эти инструкции позволяют添加、移除或者替换元素. Структурные директивы имеют символ * перед своим именем.
В Angular есть три стандартные структурированные директивы.
*ngIf — условно включить шаблон на основе логического значения, возвращаемого выражением (т. е. условная отрисовка шаблона).
*ngFor — перебор массива
*ngSwitch — отображает каждый соответствующий график.
Ниже приведен пример структурированной директивы. Синтаксис выглядит следующим образом:
Условные утверждения должны быть true или false .
{{worker.name}}
Чтобы использовать структурные директивы, нам нужно добавить элемент с директивой в шаблон Давайте добавим простой Содержимое файла Мы используем Директива Полный код Доброе утро, нажмите кнопку для просмотра Сегодня понедельник, и это фиктивный текстовый элемент, который поможет вам почувствовать себя лучше Понимание директивы ngIf с предложением else Мы используем директиву Наш компонентный файл Переводчик добавил: Эта команда очень полезна в реальной разработке. Мы используем чашки Овощи Брюки Мои покупки В У нас есть переменная Если значение условия Если вы хотите добавить или удалить элемент из Лучшее правило: когда мы думаем об манипулировании DOM, самое время использовать структурные директивы . Структурные директивы — важная часть Я надеюсь, что благодаря этой статье читатели смогут лучше понять, как использовать эти инструкции и когда использовать эти режимы.Angular генерирует элемент *ngIf . Это преобразует его в привязку свойства в квадратных скобках [] , например [ngIf] . Остальная часть , включая имя класса, вставляется в
{{worker.name}}
Как работают структурные директивы Angular?
HTML . Затем добавьте, удалите или замените элементы на основе условий или выражений, которые мы установили в директиве. Примеры структурных директив
HTML код.app.component.html следующее:
Добро пожаловать
Как использовать директиву
*ngIf*ngIf , чтобы определить, отображать или удалять элемент в зависимости от условий. ngIf очень похож на if-else .*ngIf удаляет элементы HTML если выражение имеет значение false . Если true , копия элемента будет добавлена в DOM .*ngIf выглядит следующим образом:
<час>
Привет
Как использовать директиву
*ngFor*ngFor для перебора массива. например: <ул>
TypeScript : импортировать {Component, OnInit} из '@angular/core';
@Компонент({
селектор: 'app-иллюстрации',
templateUrl: './иллюстрации.компонент.html',
styleUrls: ['./иллюстрации.компонент.css']
})
класс экспорта IllustrationsComponent реализует OnInit {
рабочие: любой = [
'работник 1',
'работник 2',
'рабочий 3',
'работник 4',
'работник 5',
]
конструктор() { }
ngOnInit(): пустота {
}
} Как использовать директиву
*ngSwitchngSwitch , чтобы решить, какой элемент отображать на основе различных условных операторов. Директива *ngSwitch очень похожа на используемый нами оператор switch . например:
typescript : Мои покупки: строка = '';
MyShopping , которая имеет значение по умолчанию и используется для рендеринга определенных элементов в модуле, соответствующих условиям.true , соответствующие элементы будут отображены в DOM , а остальные элементы будут игнорироваться. Если ни один элемент не соответствует, элемент *ngSwitchDefault отображается в DOM . Когда нам нужно использовать структурные директивы в Angular?
DOM , вам следует использовать директивы структуры. Конечно, мы также можем использовать их для изменения стилей CSS элементов или добавления прослушивателей событий. Вы даже можете использовать их для создания нового элемента, которого раньше не существовало. Подвести итог
Angular , и мы можем использовать их разными способами.