Как да използвам и създавам потребителски директиви в Angular

Програмиране

След като играх дълго време с Angular, най-накрая излязох с разбираемо обяснение на Angular директивите. В тази статия първо ще разберем какво точно представлява директива и как да я използваме в Angular. Ние също ще създадем свои собствени директиви. И така, какво чакаме? Нека се потопим дълбоко в него.

Какво е ъглова директива?

Директивите са функциите, които ще се изпълняват, когато Angular компилаторът го намери . Ъгловите директиви подобряват способността на HTML елементи, като прикачват персонализирано поведение към DOM.

От основната концепция, ъгловите директиви са категоризирани в три категории.

  1. Директиви за атрибутите
  2. Структурни директиви
  3. Компоненти

Директиви за атрибутите

Директивите за атрибутите са отговорни за манипулирането на външния вид и поведението на DOM елементите. Можем да използваме директиви за атрибути, за да променим стила на DOM елементите. Тези директиви също се използват за скриване или показване на определени DOM елементи условно. Angular предоставя много вградени директиви за атрибути като NgStyle , NgClass и др. Също така можем да създадем свои собствени директиви за атрибути за желаната от нас функционалност.

Структурни директиви

Структурните директиви са отговорни за промяната на структурата на DOM. Те работят чрез добавяне или премахване на елементите от DOM, за разлика от директивите за атрибутите, които просто променят външния вид и поведението на елемента.

Можете лесно да разграничите структурната директива и директивата за атрибутите, като разгледате синтаксиса. Името на структурната директива винаги започва с префикс със звездичка (*), докато директивата за атрибутите не съдържа никакъв префикс. Трите най-популярни вградени структурни директиви, които Angular осигурява, са NgIf , NgFor и NgSwitch .

Компоненти

Компонентите са директиви с шаблони. Единствената разлика между Components и другите два типа директиви е Template. Атрибутите и структурните директиви нямат шаблони. Така че, можем да кажем, че компонентът е по-чиста версия на директивата с шаблон, който е по-лесен за използване.

Използване на ъглови вградени директиви

В Angular има много вградени директиви, които можете лесно да използвате. В този раздел ще използваме две много прости вградени директиви.

Директивата NgStyle е директива за атрибути, използвана за промяна на стила на всеки DOM елемент въз основа на някакво условие.

 I am an Attribute Directive
В горния кодов фрагмент добавяме син фон, ако стойността на isBlueпроменливата е вярна. Ако стойността на isBlueпроменливата е false, тогава фонът на горния елемент ще бъде червен.

Директивата NgIf е структурна директива, използвана за добавяне на елементи в DOM според някои условия.

I am a Structural Directive
В горния кодов фрагмент целият абзац ще остане в DOM, ако стойността на showпроменливата е вярна, в противен случай ще започне от DOM.

Създаване на директива за персонализирани атрибути

Създаването на персонализирана директива е точно като създаването на Angular компонент. За да създадем персонализирана директива, трябва да заменим @Componentдекоратора с @Directiveдекоратор.

И така, нека да започнем със създаването на нашата първа директива за персонализирани атрибути. В тази директива ще подчертаем избрания DOM елемент, като зададем цвета на фона на даден елемент.

Създайте app-highlight.directive.tsфайл в src/appпапка и добавете кодовия фрагмент по-долу.

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

Тук внасяме Directiveи ElementRefот Angular core. Предоставя Directiveфункционалността на @Directiveдекоратора, в който ние предоставяме неговия селектор на свойства, за да appHighLightможем да използваме този селектор навсякъде в приложението. Също така импортираме ElementRefкоя е отговорна за достъпа до DOM елемента.

Сега, за да накараме appHighlightдирективата да работи, трябва да добавим нашата директива към масива на декларациите във app.module.tsфайла.

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Сега ще използваме нашата новосъздадена потребителска директива. Добавям appHightlightдирективата в, app.component.htmlно можете да я използвате навсякъде в приложението.

Highlight Me !

Резултатът от горния кодов фрагмент ще изглежда така.

Създаване на персонализирана структурна директива

В предишния раздел създадохме първата си директива за атрибути. Същият подход се използва и за създаване на структурната директива.

И така, нека да започнем със създаването на нашата структурна директива. В тази директива ще приложим *appNotдирективата, която ще работи точно срещу *ngIf.

Сега създайте app-not.directive.tsфайл в src/appпапката и добавете кода по-долу.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

Както видяхте в горния кодов фрагмент, ние импортираме Directive, Input, TemplateRef and ViewContainerRefот@angular/core.

Directiveосигурява същата функционалност за @Directiveдекоратора. В Inputдекоратор се използва за комуникация между двата компонента. Той изпраща данни от единия компонент към другия, като използва свойството обвързване.

TemplateRefпредставлява вградения шаблон, който се използва за инстанциране на вградените изгледи. Тези вградени изгледи са свързани към шаблона, който трябва да бъде изобразен.

ViewContainerRefе контейнер, към който може да се прикачи един или повече изгледи. Можем да използваме createEmbeddedView()функцията, за да прикачим вградените шаблони в контейнера.

Сега, за да накараме appNotдирективата да работи, трябва да добавим нашата директива към масива на декларациите във app.module.tsфайла.

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Сега е време да използваме нашата новосъздадена структурна директива.

Добавям appNotдирективата в, app.component.htmlно можете да я използвате навсякъде в приложението.

True
False

В *appNotдирективата е проектиран по такъв начин, че тя добавя шаблон елемент в DOM, ако *appNotстойността е falseточно срещу *ngIfдирективата.

Резултатът от горния кодов фрагмент ще изглежда така.

Надявам се тази статия да отговори на повечето от въпросите ви относно Angular директиви. Ако имате някакви въпроси или съмнения, не се колебайте да се свържете с мен в полето за коментари.