Как создавать собственные директивы в Angular
Одна из основных особенностей Angular — директивы. Директивы Angular дают вам возможность добавить поведение к элементам DOM. Angular предоставляет широкий спектр директив. Вы также можете создавать собственные директивы в этой мощной среде.
Что такое директива?
Директивы — это пользовательский код, который Angular использует для изменения поведения или визуальных элементов HTML-элемента. Вы можете использовать директивы для добавления прослушивателей событий, изменения DOM, а также для отображения или скрытия элементов.
В Angular есть два типа директив: структурные и атрибутивные. Структурные директивы изменяют структуру DOM, а атрибутные директивы изменяют внешний вид или поведение компонента. Директивы — эффективный способ расширения компонентов Angular.
Преимущества использования директив в Angular
- Может быть повторно использован во многих компонентах, что экономит ваше время и усилия.
- Директивы можно расширять, добавляя новые функциональные возможности, делая компоненты более мощными.
- Гибкость редактирования поведения или визуальных элементов компонента различными способами дает вам большую гибкость при создании приложения.
Настройка приложения Angular
Установите Angular CLI, запустив код в терминале:
npm install -g @angular/cli
После установки Angular CLI создайте проект Angular, выполнив следующую команду:
ng новое приложение для пользовательских директив
Выполнение приведенной выше команды создаст проект Angular с именем custom-directives-app.
Создать собственную команду
Теперь у вас есть проект Angular и вы можете приступить к созданию собственных директив. Создайте файл TypeScript и определите класс, содержащий элемент декоратора @Directive.
@Directive — это декоратор TypeScript, используемый для создания пользовательских директив. Теперь создайте файл Highlight.directive.ts в каталоге src/app. В этом файле вы создадите специальную директиву: Highlight.
Например:
импортировать {директиву} из “@angular/core”; @Directive({ selector: “(myHighlight)”, }) класс экспорта HighlightDirective {constructor() {} }
Приведенный выше блок кода импортирует директиву декоратора из модуля @angular/core. Decorato @Directive изменяет класс HighlightDirective. Он принимает объект в качестве аргумента, используя атрибут селектора.
В этом случае вы устанавливаете атрибут селектора на (myHighlight) , что означает, что вы можете применять эту директиву к шаблонам, добавляя атрибут myHighlight к элементу.
Вот пример использования директив в шаблонах:
Немного текста
Добавить поведение в директиву
Теперь вы успешно создали директиву. Следующий шаг — добавить в директиву поведение, позволяющее манипулировать DOM. Вам понадобится ElementRef из @angular/core, чтобы добавить поведение в директиву.
Вы должны добавить ElementRef в конструктор директивы. ElementRef — это оболочка корневого элемента внутри средства просмотра.
Вот пример того, как добавить поведение в директиву:
import { Directive, ElementRef } из “@angular/core”; @Directive({ селектор: “(myHighlight)” }) класс экспорта HighlightDirective { конструктор (частный элемент: ElementRef) { this.element.nativeElement.style.backgroundColor=”lightblue”; } }
В этом примере конструктор класса HighlightDirective принимает параметр ElementRef, который Angular автоматически внедряет. ElementRef обеспечивает доступ к базовому элементу DOM.
Используя свойство this.element.nativeElement, вы получаете доступ к корневому элементу DOM параметра элемента. Затем вы устанавливаете светло-голубой цвет фона элемента, используя атрибут style. Это означает, что любой элемент, который вы применяете к директиве myHighlight, будет иметь светло-голубой фон.
Чтобы директива работала, обязательно импортируйте и объявите ее в файле app.module.ts.
Например:
импортировать { NgModule } из ‘@angular/core’; импортировать { BrowserModule } из @angular/platform-browser; импортировать { AppRoutingModule } из ‘./app-routing.module’; импортировать {AppComponent} из ‘./app.comComponent’; импортировать { HighlightDirective } из ‘./highlight.directive’; @NgModule({ объявления: ( AppComponent, HighlightDirective, ), импорты: ( BrowserModule, AppRoutingModule ), поставщики: (), начальная загрузка: (AppComponent) }) класс экспорта AppModule { }
Теперь вы можете применять директиву myHighlight к элементам компонентов Angular.
Немного текста
Запустите приложение на сервере компонента, чтобы проверить, работает директива или нет. Вы можете сделать это, выполнив в терминале следующую команду:
нг служить
После выполнения этой команды перейдите в веб-браузере, и вы увидите интерфейс, похожий на изображение ниже.
Встроенные директивы Angular принимают значения, изменяющие изображения элементов, а пользовательская директива myHighlight — нет. Вы можете настроить директиву так, чтобы она принимала значение, которое будет использоваться для динамической установки цвета фона шаблона.
Для этого замените код в файле Highlight.directive.ts на:
import { Directive, ElementRef, Input } from “@angular/core”; @Directive({ селектор: “(myHighlight)” }) класс экспорта HighlightDirective { @Input() set myHighlight(color: string) { this.element.nativeElement.style.backgroundColor = color; } Конструктор (частный элемент: ElementRef) { } }
В приведенном выше блоке кода класс HighlightDirective содержит метод установки с именем myHightlight. Он принимает параметр цвета строки типа. Вы изменяете установщик с помощью декоратора@Input, который позволяет передавать значения цвета в директиву из родительского компонента.
Теперь вы можете выбрать цвет фона, передав значение директиве myHighlight.
Например:
Немного текста
Создание пользовательских структурных директив
Angular предоставляет две структурные директивы: ngFor и ngIf. Директива ngFor отображает шаблон для каждого элемента коллекции (массива), а nglf обрабатывает рендеринг в соответствии с условиями.
В этом разделе вы создадите собственную структурную директиву, которая будет функционировать как директива nglf. Для этого создайте файл Condition.directive.ts.
В файлеcondition.directive.ts напишите следующий код:
import { Directive, Input, TemplateRef, ViewContainerRef } from ‘@angular/core’ @Directive({ selector: “(condition)” }) экспортный класс ConditionDirective { @Input() setcondition(arg: boolean) { if(arg) { this.viewContainer.createEmbeddedView(this.template) } else { this.viewContainer.clear(); } } Конструктор (частный шаблон: TemplateRef, частный viewContainer: ViewContainerRef) {} }
Этот блок кода позволяет условно отображать компоненты, применяя к компоненту условную директиву и передавая логическое значение из родительского компонента.
В конструктор класса ConditionDirective вы вставляете экземпляр TemplateRef и ViewContainerRef. TemplateRef представляет шаблон, связанный с этой директивой, а ViewContainerRef представляет контейнер, в котором приложение отображает окна просмотра.
Метод установки класса ConditionDirective использует оператор if else для проверки параметра arg. Директива создает встроенное окно, используя предоставленный шаблон, если этот параметр имеет значение true. Метод createEmbeddedView класса ViewContainerRef создает и отображает представление в DOM.
Если этот параметр имеет значение false, эта директива очистит контейнер представления, используя метод очистки класса ViewContainerRef. Это удалит из DOM все ранее отображавшиеся средства просмотра.
После создания директивы зарегистрируйте ее в проекте, импортировав и объявив ее в файле app.module.ts. После этого вы можете начать использовать директивы в своих шаблонах.
Вот пример того, как использовать его в вашем шаблоне:
Привет!!!
Теперь вы можете свободно создавать собственные директивы. Не бойтесь использовать эту функцию, поскольку она поможет вам редактировать DOM и сделать шаблон более интересным.
В приведенной выше статье вы познакомились с «Как создавать собственные директивы в Angular». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!
