Пользовательские директивы Angular предоставляют мощный механизм для модификации DOM и внедрения динамического поведения в ваши шаблоны. Одной из ключевых особенностей Angular являются директивы.
Директивы Angular предоставляют способ добавления поведения к элементам DOM. Angular предоставляет различные встроенные директивы, и вы также можете создавать пользовательские директивы в этой мощной платформе.
Что такое директивы? Директивы - это пользовательский код, который Angular использует для изменения поведения или внешнего вида элемента HTML. Вы можете использовать директивы для добавления обработчиков событий, изменения DOM или отображения/скрытия элементов.
В Angular существуют два типа встроенных директив: структурные и атрибутные. Структурные директивы изменяют структуру DOM, в то время как атрибутные директивы изменяют внешний вид или поведение элемента. Директивы представляют собой мощный способ расширить функциональность компонентов Angular.
Преимущества использования директив Вот некоторые из преимуществ использования директив в Angular:
Настройка вашего Angular-приложения Для настройки Angular-приложения установите Angular CLI, выполнив следующий код в вашем терминале:
npm install -g @angular/cli
После установки Angular CLI создайте проект Angular, выполнив следующую команду:
ng new custom-directives-app
Выполнение этой команды создаст проект Angular с именем custom-directives-app.
Создание пользовательской директивы Теперь у вас есть проект Angular, и вы можете начать создавать пользовательские директивы. Создайте файл TypeScript и определите класс, который декорирован декоратором @Directive.
Декоратор @Directive - это декоратор TypeScript, используемый для создания пользовательских директив. Теперь создайте файл highlight.directive.ts в каталоге src/app. В этом файле вы создадите пользовательскую директиву highlight.
Например:
import { Directive } from "@angular/core";
({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
В приведенном выше коде импортируется декоратор Directive из модуля @angular/core. Декоратор @Directive украшает класс HighlightDirective. Он принимает объект в качестве аргумента с свойством selector.
В данном случае свойство selector установлено в [myHighlight], что означает, что вы можете применять эту директиву к вашим шаблонам, добавив атрибут myHighlight к элементу.
Вот пример того, как использовать директиву в ваших шаблонах:
<main>
<p myHighlight>Some text</p>
</main>
Добавление поведения в директиву Теперь вы успешно создали директиву. Следующим шагом является добавление поведения в директиву, чтобы она могла манипулировать DOM. Вам понадобится ElementRef из @angular/core, чтобы добавить поведение к директиве.
Вы будете внедрять ElementRef в конструктор директивы. ElementRef - это оболочка вокруг собственного элемента внутри представления.
Вот пример того, как добавить поведение в директиву:
import { Directive, ElementRef } from "@angular/core";
({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
}
}
В этом примере конструктор класса HighlightDirective принимает параметр ElementRef, который Angular автоматически внедряет. ElementRef предоставляет доступ к базовому DOM-элементу.
Используя свойство this.element.nativeElement, вы получаете доступ к собственному DOM-элементу параметра element. Затем вы устанавливаете цвет фона компонента в lightblue, используя свойство style. Это означает, что любой элемент, к которому применена директива myHighlight, будет иметь светло-голубой фон.
Чтобы сделать директиву функциональной, убедитесь, что импортируете и объявляете ее в файле app.module.ts.
Например:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';
({
declarations: [
AppComponent,
HighlightDirective,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Теперь вы можете применять директиву myHighlight к элементам в ваших компонентах Angular.
<main>
<p myHighlight>Some text</p>
</main>
Запустите ваше приложение на сервере разработки, чтобы проверить, функциональна ли директива. Вы можете сделать это, выполнив следующую команду в терминале:
ng serve
После выполнения команды перейдите по адресу http://localhost:4200/ в вашем веб-браузере, и вы увидите интерфейс, похожий на изображение ниже.
Встроенные директивы Angular принимают значения для изменения внешнего вида элемента, но пользовательская директива myHighlight этого не делает. Вы можете настроить директиву для принятия значения, которое она будет использовать для динамической установки цвета фона шаблона.
Для этого замените код в файле highlight.directive.ts следующим:
import { Directive, ElementRef, Input } from "@angular/core";
({
selector: "[myHighlight]"
})
export class HighlightDirective {
() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
}
constructor(private element: ElementRef) {
}
}
В приведенном выше коде класс HighlightDirective содержит метод установки с именем myHighlight. Этот метод принимает параметр цвета типа string. Вы декорируете метод установки декоратором @Input, позволяя передавать значение цвета в директиву из родительского компонента.
Теперь вы можете определить цвет фона, передав значение директиве myHighlight.
Например:
<main>
<p myHighlight='pink'>Some text</p>
</main>
Создание пользовательской структурной директивы В предыдущих разделах вы узнали, как создавать, добавлять поведение и применять пользовательские атрибутные директивы к вашему шаблону. Атрибутные директивы изменяют внешний вид элементов DOM, тогда как структурные директивы добавляют, удаляют или перемещают элементы в DOM.
Angular предоставляет две структурные директивы: ngFor и ngIf. Директива ngFor рендерит шаблон для каждого элемента в коллекции (массиве), в то время как ngIf обрабатывает условное отображение.
В этом разделе вы создадите пользовательскую структурную директиву, действующую как директива ngIf. Для этого создайте файл condition.directive.ts.
В файле condition.directive.ts напишите следующий код:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
({
selector: "[condition]"
})
export class ConditionDirective {
() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
} else {
this.viewContainer.clear();
}
}
constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}
Этот код позволяет вам условно отображать элементы, применяя директиву condition к элементу и передавая булево значение из родительского компонента.
В конструкторе класса ConditionDirective вы внедряете экземпляр TemplateRef и ViewContainerRef. TemplateRef представляет шаблон, связанный с директивой, а ViewContainerRef представляет контейнер, в котором приложение рендерит представления.
Метод установки класса ConditionDirective использует оператор if else для проверки параметра arg. Если параметр истинен, директива создает внедренное представление с использованием предоставленного шаблона. Метод createEmbeddedView класса ViewContainerRef создает и рендерит представление в DOM.
Если параметр ложен, директива очищает контейнер представлений, используя метод clear класса ViewContainerRef. Это удаляет все ранее отображенные представления из DOM.
После создания директивы зарегистрируйте ее в вашем проекте, импортировав и объявив ее в файле app.module.ts. После этого вы можете начать использовать директиву в ваших шаблонах.
Вот пример того, как использовать ее в ваших шаблонах:
<main>
<p *condition="true">Hello There!!!</p>
</main>
Теперь вы можете создавать пользовательские директивы Пользовательские директивы в Angular предоставляют мощный способ манипулировать DOM и добавлять динамическое поведение к вашим шаблонам. Вы узнали, как создавать и применять пользовательские атрибутные и структурные директивы в ваших Angular-приложениях. Понимая, как создавать и использовать пользовательские директивы, вы можете полностью воспользоваться возможностями Angular.
Добавить комментарий