Angular: Sử dụng Directive

Directive trong Angular là một class javascript được khai báo với decorator @directive. Có 3 loại directive trong Angular: Component directive, Structural directive và Attribute directive.
Trong bài viết này, chúng ta sẽ tìm hiểu về Attribute directive.

Tạo mới 1 Directive

Mở cmd, bạn gõ:

ng g directive _directives\pa

File pa.directive.ts sẽ được tạo với nội dung như sau:

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

@Directive({
  selector: '[appPa]'
})
export class PaDirective {

  constructor(element: ElementRef) { 
    element.nativeElement.classList.add("bg-success", "text-white");
    console.log('appPa');
  }
}

Hàm constructor định nghĩa tham số ElementRef. Đây là tham số mà Angular cung cấp khi tạo đối tượng Directive, và đại diện cho host element. Class ElementRef định nghĩa 1 đối tượng duy nhất, nativeElement, trả về đối tượng được sử dụng trên trình duyệt.
classList.add: thêm 2 class bg-success và text-white
Ở file template, bạn thêm vào đoạn code sau:

<div class='container'>
  <div class='row'>
    <div class='col-lg-12'>
      <h1>Custom Directive</h1>
      <div appPa>Khủng long con ham ăn</div>
    </div>
  </div>  
</div>

Kết quả

Đọc data từ Directive

Đọc static data

Bạn khai báo thêm giá trị cho appPa

<div appPa>Khủng long con ham ăn</div>
<div appPa="bg-danger">Mèo máy doraemi</div>
<div appPa="bg-warning">Hải Âu</div>

Để nhận được giá trị từ appPa, bạn khai báo thêm 1 parameter bgClass trong hàm constructor như sau:

constructor(element: ElementRef, @Attribute("appPa")bgClass: string) { 
 element.nativeElement.classList.add(bgClass || "bg-success", "text-white");    
}

Kết quả:

Đọc dynamic data

Vấn đề đặt ra là làm sao directive có thể đọc được dữ liệu động (dynamic data) và phản hồi chính xác khi các thành phần trên file html bị thay đổi.
Để làm được điều này, bạn sử dụng input property.
Cập nhật file pa.directive.ts như sau:

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

@Directive({
  selector: '[appPa]'
})
export class PaDirective {

  @Input("appPa") bgClass: string;

  constructor(private element: ElementRef) { 
       
  } 

  ngOnInit(){
    this.element.nativeElement.classList.add(this.bgClass || "bg-success", "text-white"); 
  }

}

@Input("appPa") bgClass: string: khai báo tên của property ‘appPa’ và gán nó với @Input decorator.
ngOnInit là một móc vòng đời được gọi bởi Angular để chỉ ra rằng component đã được tạo ra. Lưu ý là hàm này gọi sau hàm constructor và hàm ngOnChanges()

ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component

Cú pháp:

[tên Property]= “giá trị”

Trong file template, bạn khai báo như sau:

<table class="table table-sm table-bordered table-striped">
  <tr>
 <th></th>
 <th>Name</th>
 <th>Category</th>        
  </tr>
  <tr *ngFor="let item of products; let i = index"
 [appPa]="item.category == 'Tien su' ? 'bg-success': null">
 <td>{{ i + 1 }}</td>
 <td>{{ item.name }}</td>
 <td>
   {{ item.category }}
 </td>        
  </tr>
</table>

Thay đổi giá trị của Property

Đôi lúc bạn cần thay đổi giá trị của property. Bạn update code như sau và hi vọng background color sẽ đổi màu khi đổi category
File template

<table class="table table-sm table-bordered table-striped">
  <tr>
 <th></th>
 <th>Name</th>
 <th>Category</th>        
  </tr>
  <tr *ngFor="let item of products; let i = index"
 [appPa]="item.category == 'Tien su' ? 'bg-success': bg-info">
 <td>{{ i + 1 }}</td>
 <td>{{ item.name }}</td>
 <td>
   {{ item.category }}
 </td>
 <td>
   <button (click)="change()" class='button'>Change name</button>
 </td>  
  </tr>
</table>

Bạn thêm hàm change() vào file component.ts

change(){
  if(this.products[0].name == 'Khung Long'){
 this.products[0].name = 'Khung long con ham an';
 this.products[0].category = 'Anime';
  }
  else{
 this.products[0].name = 'Khung Long';
 this.products[0].category = 'Tien su';
  }
}

Kết quả là bạn vẫn chỉ thấy màu xanh.
Khắc phục:
Để nhận được notification thay đổi từ property, directive phải implement hàm ngOnChanges()
ngOnChanges chạy khi bạn đặt/thay đổi giá trị cho các property đầu vào (@Input/property)
Cú pháp

interface OnChanges {
  ngOnChanges(changes: SimpleChanges): void
}

Bạn thêm hàm ngOnChanges():

ngOnChanges(changes: {[property: string]: SimpleChange}){    
 let change = changes["bgClass"];
 let classList = this.element.nativeElement.classList;
 if (!change.isFirstChange() && classList.contains(change.previousValue)) {
   classList.remove(change.previousValue);
 }
 if (!classList.contains(change.currentValue) && change.currentValue != '') {
   classList.add(change.currentValue);
 }
}

Kết quả:

Download link: http://www.mediafire.com/file/3x09yo29y0q39u6

Tham khảo

Ebook Pro Angular 6, 3rd Edition

Chúc các bạn thành công

Nhatkyhoctap's blog