დირექტივის შექმნა

შევქმნათ ატრიბუტის დირექტივი.

დირექტივი ისევე იქმნება როგორც კომპონენტი. ამისთვის გვჭირდება ფაილის შექმნა საიდანაც დავაექსპორტებთ კლასს, რომელიც რაღაც დეკორატორით იქნება დეკლარირებული. შესაძლებელია დირექტივის შექმნა CLI-ს საშუალებით. ჩვენ შევქმნით დირექტივს, რომელიც ელემენტს ტექსტის ფერს შეუცვლის მაუსის დაჰავერების დროს.

ng generate directive highlight

ჩვენ დირექტივს ერქმევა highlight. ანგულარი შექმნის ახალ ფაილს, რომელიც შეიცავს წერტილებით გამოყოფილ directive სიტყვას. დირექტივ ფაილებს კონვენციურად ასეთი დასახელებით გამოყოფენ. ფაილში დაექსპორტებულია კლასი რომელსაც კონვენციურად ჰქვია დირექტივის სახელი + Directive.

import { Directive } from "@angular/core";

@Directive({
  selector: "[appHighlight]",
  standalone: true,
})
export class HighlightDirective {
  constructor() {}
}

ეს კლასი შესაბამისი მოდულის დეკლარაციების სიაშიუნდა იყოს დამატებული, რათა ანგულარმა მისი არსებობის შესახებ იცოდეს. Directive დეკორატორში ჩვენ შეგვიძლია დირექტივის კონფიგურაცია. არსებობს სხვადასხვაგვარი სელექტორი და იმის მიხედვით თუ რა სელექტორს ავირჩევთ, ანგულარი განსხვავებული პრინციპით გაუკეთებს ამ დირექტივს ინიციალიზაციას. ოთკუთხედ ბრჭყალებში მოქცეული სახელი გულისხმობს, რომ ჩვენ დირექტივის გამოყენება ატრიბუტის სახელით შეგვიძლია რაიმე ელემენტზე:

<some-element appHighlight></some-element>

ყველაზე ხშირად ანგულარში ასეთი დირექტივის სელექტორს ვხვდებით. სხვა ტიპის სელექტორების შესახებ ინფორმაცია იხილეთ ანგულარის დოკუმენტაციაში. სელექტორი იმავე პრინციპით მუშაობს, როგორც CSS-ის სელექტორი ან ჯავასკრიპტში document.querySelector.

ჩვენი დირექტივის კლასში შემდეგი მოდიფიკაციები შეგვაქვს:

import { Directive, ElementRef, HostListener, Input } from "@angular/core";

@Directive({
  selector: "[appHighlight]",
  standalone: true,
})
export class HighlightDirective {
  @Input() highlightColor: "blue" | "green" | "yellow" = "yellow";

  constructor(private elementRef: ElementRef) {}

  @HostListener("mouseover")
  onMouseOver() {
    this.elementRef.nativeElement.style.color = this.highlightColor;
  }

  @HostListener("mouseout")
  onMouseOut() {
    this.elementRef.nativeElement.style.color = "initial";
  }
}

როცა ჩვენ ელემენტზე მოვათავსებთ appHighlight დირექტივს, მასზე იმუშავებს ამ დირექტივის კლასში არსებული ლოგიკა. ანუ Input დეკორატორით შექმნილი თვისება არსებულ ელემენტზე შესაძლებელია მიებას მშობელი ელემენტიდან data binding-ით. highlightColor-ში რამდენიმე შესაძლო მნიშვნელობის ტიპი განსვსაზღვრეთ და წინასწარი ფერიც დავუწერეთ.

კონსტრუქტორში შემოგვაქვს ElementRef, იგი იმ native ელემენტზე გვაძლევს წვდომას, რომელზეც ეს დირექტივი იჯდება. მას host ელემენტი ჰქვია. ElementRef-ის საშუალებით HostListener-ებში გარკვეული მოვლენების მიხედვით ვცვლით ამ ელემენტში CSS თვისებას - color (რაც დიდად ჩვეულებრივი ჯავასკრიპტისგან არ განსხვავდება).

HostListener არის დეკორატორი, რომელიც საშუალებას გვაძლევს, მოვუსმინოთ ივენთებს host ელემენტზე. HostListener გამოიყენება კომპონენტის კლასებშიც, თუმცა უფრო ხშირად ის დირექტივებში გვხვდება. mouseover მოვლენის შემთხვევაში ელემენტს ჩვენთვის სასურველი ფერი მიენიჭება, ხოლო როცა მაუსი მის არეალს დატოვებს, ფერი საწყის მდგომარეობას დაუბრუნდება.

HilightDirective არის standalone ტიპის დირექტივი, რაც იმას ნიშნავს, რომ მის გამოსაყენებლად საჭიროა ამ კლასის დამატება კომპონენტის იმპორტების სიაში. ჩვენ ამ დირექტივს AppComponent-ში ვიყენებთ.

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HighlightDirective } from "./highlight.directive";

@Component({
  // ...
  standalone: true,
  imports: [CommonModule, HighlightDirective],
  // ...
})
export class AppComponent {}

ყველა კომპონენტში, სადაც ამ დირექტივის გამოყენება დაგვჭირდება, მისი ასეთი პრინციპით დაიმპორტება იქნება საჭირო.

იმავე კომპონენტის თემფლეითში შევქმნათ რამდენიმე h1 ელემენტი დირექტივის შესამოწმენლად:

<h1 appHighlight>I love Angular 1</h1>
<h1 appHighlight highlightColor="blue">I love Angular 2</h1>
<h1>I love Angular 3</h1>

ახლა პირველ ორ სათაურს ფერი უნდა ეცვლებოდეს. ყურადღება მიაქციეთ, რომ highlightColor თვისებაზე ჩვენ ოთკუთხედი ფრჩხილები არ გამოვიყენეთ. ასე highlightColor თვისება დირექტივის კლასში იღებს პირდაპირ სტრინგის ტიპის მნიშვნელობას. ოთხკუთხედი ფრჩხილებით blue არა სტრინგი, არამედ ცვლადის სახელი იქნებოდა, როგორც ჯავასკრიპტის ექსპფრეშენი, ამისთვის სათანადო სახელის თვისება უნდა არსებობდეს AppComponent-ის კლასში.

შესაძლებელია დირექტივში არსებობდეს სელექტორის სახელის მქონე Input თვისება:

@Input() appHighlight: "blue" | "green" | "yellow" = "yellow";

ასე პირდაპირ დირექტივის სელექტორსვე შეგვიძლია გადავცეთ ფერი:

<h1 appHighlight="blue">I love Angular 2</h1>

პრობლემა ის არის, რომ ასე დირექტივის ელემენტზე დაწერა, მისთვის მნიშვნელობის მიცემის გარეშე, გამოიწვევს ერორს, რადგან ჩვეულებრივ ეს იგივეა, რაც ამ ფროფერთისთვის ცარიელი სტრინგის გადაცემა (appHighlight=""), რაც ჩვენი განსაზღვრული ტიპების მიხედვით მიუღებელია.

დირექტივებზე თავისუფლად არის შესაძლებელი ივენთების მოსმენა და two-way binding-იც. გირჩევთ რომ ამის გაკეთება თქვენით სცადოთ.

შეჯამება

ამ თავში ჩვენ განვიხილეთ დირექტივის დანიშნულება და შევქმენით ჩვენი დირექტივი, რომელიც ელემენტებს ტექსტის ფერს უცვლის. ჩვენ გამოვიყენეთ ატრიბუტის სელექტორი, რათა ელემენტზე დირექტივი ისე შეგვექმნა, როგორც ატრიბუტი. დირექტივის კლასში, ისევე როგორც კომპონენტში, შესაძლებელია დატა ბაინდინგი, ივენთ ბაინდინგი, სერვისების გამოყენება და host ელემენტის მანიპულაცია.