Xây dựng chỉ thị tùy chỉnh trong Angular

Các chỉ thị xây dựng trong Angular 2+ không khác nhiều so với các thành phần xây dựng. Rốt cuộc, các thành phần chỉ là các chỉ thị với một khung nhìn được đính kèm. Trên thực tế, có ba loại chỉ thị trong Angular: thành phần, chỉ thị thuộc tính và chỉ thị cấu trúc.

Các chỉ thị cấu trúc thêm hoặc xóa các phần tử khỏi DOM. NgIf , ngFor và ngSwitch là các ví dụ về các chỉ thị cấu trúc tích hợp sẵn. Các chỉ thị thuộc tính được sử dụng để thay đổi kiểu dáng hoặc hành vi của các phần tử.

Hãy cùng tìm hiểu cách tạo một chỉ thị thuộc tính tùy chỉnh với một ví dụ với chỉ thị appShadow .

Định nghĩa lớp chỉ thị

Nhập chỉ thị , ElementRef và Renderer2 từ @ angle / core , sau đó sử dụng trình kết xuất để đặt kiểu của phần tử thành giá trị hộp-bóng mong muốn của ta :

Chỉ thị: shadow.directive.ts

import { Directive, ElementRef, Renderer2 } from '@angular/core';

Lưu ý cách bộ chọn của ta được bao bọc trong dấu ngoặc: [appShadow] , để biến nó thành một chỉ thị thuộc tính một cách chính xác.

Khai báo nó trong module ứng dụng của ta

Đây là cách bạn khai báo chỉ thị mới của ta trong module root ứng dụng:

Mô-đun ứng dụng: app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { ShadowDirective } from './shadow.directive';

Sử dụng chỉ thị trong mẫu của ta

Bây giờ nó đơn giản như sử dụng chỉ thị thuộc tính trong mẫu của ta như sau:

Mô-đun ứng dụng: app.component.html

<span appShadow>Alligator</span>

Cải thiện chỉ thị của ta

Chỉ thị appShadow của ta hơi ngu ngốc và thay vào đó, ta có thể áp dụng một bóng đổ đơn giản với một ràng buộc kiểu . Do đó, hãy làm cho nó tốt hơn bằng cách cho phép chuyển các giá trị vào chỉ thị của ta :

Chỉ thị: shadow.directive.ts

import { Directive, ElementRef, Input, Renderer2, OnInit } from '@angular/core';

@Directive({ selector: '[appShadow]' })
export class ShadowDirective implements OnInit {
@Input() appShadow: string;
@Input() appShadowX: string;
@Input() appShadowY: string;
@Input() appShadowBlur: string;

constructor(private elem: ElementRef, private renderer: Renderer2) { }

ngOnInit() {
  let shadowStr = `${ this.appShadowX } ${ this.appShadowY } ${ this.appShadowBlur } ${ this.appShadow }`;
  this.renderer.setStyle(this.elem.nativeElement, 'box-shadow', shadowStr);
}

Ta đã sử dụng đầu vào để chuyển dữ liệu từ mẫu thành phần của ta đến chỉ thị. Cũng lưu ý cách ta đang sử dụng móc vòng đời OnInit thay vì thực hiện công việc trong hàm tạo. Đó là bởi vì đầu vào của ta không có bất kỳ giá trị nào tại thời điểm xây dựng.

Đến đây bạn có thể có toàn quyền kiểm soát bóng:

Mô-đun ứng dụng: app.component.html

<span [appShadow]="'hotpink'"
      [appShadowX]="'12px'"
      [appShadowY]="'6px'"
      [appShadowBlur]="'30px'">Alligator</span>

👉 Ta gọi ứng dụng chỉ thị của bạn là Shadow, chứ không phải shadow, bởi vì đó là cách tốt nhất để giữ cho các chỉ thị tùy chỉnh của bạn được áp dụng cho ứng dụng của bạn.

Tags:

Các tin liên quan