Как использовать структурные директивы в Angular?

В этой статье вы познакомитесь с шаблоном структурных директив в Angular, узнаете, что такое структурная директива и как ее использовать. Надеюсь, она будет вам полезна!

Вход в курс повышения квалификации по интерфейсу (vue): введите обучение

В Angular есть два типа директив. Директивы атрибутов изменяют внешний вид или поведение элементов DOM . Структурные директивы добавляют или удаляют элементы DOM .

Структурные директивы — одна из самых мощных функций Angular , однако их часто понимают неправильно.

Если вам интересно узнать о структурных директивах, давайте читаем дальше и выясним, что это такое, для чего они используются и как их использовать в ваших проектах. [Рекомендуемые связанные учебные пособия: «учебник по Angular»]

что ты научишься

В этой статье вы узнаете о шаблоне структурных директив Angular . Вы узнаете, что они собой представляют и как их использовать.

Изучив эту статью, вы лучше поймете эти инструкции и сможете использовать их в реальных проектах.

Что такое структурные директивы Angular?

Структурные директивы Angular — это директивы, которые могут изменить структуру DOM . Эти инструкции позволяют添加、移除或者替换元素. Структурные директивы имеют символ * перед своим именем.

В Angular есть три стандартные структурированные директивы.

• *ngIf — условно включить шаблон на основе логического значения, возвращаемого выражением (т. е. условная отрисовка шаблона).

• *ngFor — перебор массива

• *ngSwitch — отображает каждый соответствующий график.

Ниже приведен пример структурированной директивы. Синтаксис выглядит следующим образом:

 <element ng-if="Условие"></element>

Условные утверждения должны быть true или false .

 <div *ngIf="worker" class="name">{{worker.name}}</div>

Angular генерирует элемент <ng-template> , а затем применяет директиву *ngIf . Это преобразует его в привязку свойства в квадратных скобках [] , например [ngIf] . Остальная часть <div> , включая имя класса, вставляется в <ng-template> . например:

 <ng-шаблон [ngIf]="работник">
<div class="name">{{worker.name}}</div>
</ng-шаблон>

Как работают структурные директивы Angular?

Чтобы использовать структурные директивы, нам нужно добавить элемент с директивой в шаблон HTML . Затем добавьте, удалите или замените элементы на основе условий или выражений, которые мы установили в директиве.

Примеры структурных директив

Давайте добавим простой HTML код.

Содержимое файла app.component.html следующее:

 <div style="text-align:center">
<h1>
Добро пожаловать
</h1>
</div>
<h2> <app-иллюстрации></app-иллюстрации></h2>

Как использовать директиву *ngIf

Мы используем *ngIf , чтобы определить, отображать или удалять элемент в зависимости от условий. ngIf очень похож на if-else .

Директива *ngIf удаляет элементы HTML если выражение имеет значение false . Если true , копия элемента будет добавлена ​​в DOM .

Полный код *ngIf выглядит следующим образом:

 <h1>
	<button (click)="toggleOn =!toggleOn">иллюстрация ng-if</button>
</h1>
<div *ngIf="!toggleOn">
<h2>Привет </h2>
<p>Доброе утро, нажмите кнопку для просмотра</p>
</div>
<час>
<p>Сегодня понедельник, и это фиктивный текстовый элемент, который поможет вам почувствовать себя лучше</p>
<p>Понимание директивы ngIf с предложением else</p>

Как использовать директиву *ngFor

Мы используем директиву *ngFor для перебора массива. например:

 <ул>

<li *ngFor="пусть вок рабочих">{{ вок }}</li>

</ul>

Наш компонентный файл TypeScript :

 импортировать {Component, OnInit} из '@angular/core';

@Компонент({
селектор: 'app-иллюстрации',
templateUrl: './иллюстрации.компонент.html',
styleUrls: ['./иллюстрации.компонент.css']
})
класс экспорта IllustrationsComponent реализует OnInit {
рабочие: любой = [

'работник 1',

'работник 2',

'рабочий 3',

'работник 4',

'работник 5',

]

конструктор() { }

ngOnInit(): пустота {
}

}

Как использовать директиву *ngSwitch

Переводчик добавил: Эта команда очень полезна в реальной разработке.

Мы используем ngSwitch , чтобы решить, какой элемент отображать на основе различных условных операторов. Директива *ngSwitch очень похожа на используемый нами оператор switch . например:

 <div [ngSwitch]="Мои покупки">
<p *ngSwitchCase="'cups'">чашки</p>
<p *ngSwitchCase="'veg'">Овощи</p>
<p *ngSwitchCase="'clothes'">Брюки</p>
<p *ngSwitchDefault>Мои покупки</p>
</div>

В typescript :

 Мои покупки: строка = '';

У нас есть переменная MyShopping , которая имеет значение по умолчанию и используется для рендеринга определенных элементов в модуле, соответствующих условиям.

Если значение условия true , соответствующие элементы будут отображены в DOM , а остальные элементы будут игнорироваться. Если ни один элемент не соответствует, элемент *ngSwitchDefault отображается в DOM .

Когда нам нужно использовать структурные директивы в Angular?

Если вы хотите добавить или удалить элемент из DOM , вам следует использовать директивы структуры. Конечно, мы также можем использовать их для изменения стилей CSS элементов или добавления прослушивателей событий. Вы даже можете использовать их для создания нового элемента, которого раньше не существовало.

Лучшее правило: когда мы думаем об манипулировании DOM, самое время использовать структурные директивы .

Подвести итог

Структурные директивы — важная часть Angular , и мы можем использовать их разными способами.

Я надеюсь, что благодаря этой статье читатели смогут лучше понять, как использовать эти инструкции и когда использовать эти режимы.