Ví dụ directive trong Angular 4

Ví dụ directive trong Angular 4 là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ directive trong Angular 4 sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và AngularJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Phân loại 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.

Component Directive (Directive thành phần)

Đây chính là component mà chúng ta đã học được trong các bài trước. Nó có 1 class khai báo selector, cách hoạt động, xử lý của component.

Structural directive (Directive cấu trúc)

Đúng như tên gọi, structural directive hay directive cấu trúc sẽ quyết định DOM element nào được thực thi. Các structural directive thường có dấu '*' ở trước của directive. Ví dụ điển hình của structural directive chính là *ngIf và *ngFor

Attribute directive (Directive thuộc tính)

Directive thuộc tính là các directive được sử dụng như một thuộc tính của thẻ HTML vậy (giống như thẻ <a> có thuộc tính href)

Tạo custom directive

Trong ví dụ này, chúng ta sẽ tạo một custom directive có tên là change-text. Nhiệm vụ của directive này là thêm vào nội dung bên trong của thẻ nội dung: "Hoidapcode - học lập trình online miễn phí".

Tạo directive

Để tạo directive, ta chạy lệnh ng g directive <ten_directive> trên command line

Trong đó

<ten-directive> nên để CamelCase.

để tạo directive changeText, ta chạy lệnh ng g directive changeText

Command line sẽ hiển thị như sau

command line

$ ng g directive changeText
CREATE src/app/change-text.directive.spec.ts (241 bytes)
CREATE src/app/change-text.directive.ts (149 bytes)
UPDATE src/app/app.module.ts (486 bytes) 

Kiểm tra lại thì ta thấy 2 file: change-text.directives.spect.ts và change-text.directives.ts được tạo ra và directive changeText được import trong app.module.ts.

Tại thời điểm viết bài thì directive changeText được thay đổi thành appChangeText do Angular CLI thay đổi.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
 
@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    ChangeTextDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }  

Xử lý bên trong directive

Tiếp, ta xử lý directive để thêm nội dung "Hoidapcode - học lập trình online miễn phí" vào nội dung của thẻ. Mở file change-text.directives.ts ra và thay đổi nội dung của nó thành

change-text.directives.ts

import { Directive, ElementRef } from '@angular/core';
import { element } from 'protractor';
 
@Directive({
  selector: '[appChangeText]'
})
export class ChangeTextDirective {
 
  constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Hoidapcode.com- học lập trình online miễn phí";
   }
 
} 

Constructor được thêm vào 1 đối có kiểu ElementRef - chính là instance của thẻ mà directive này nằm trong.

Element.nativeElement.innerText = "Hoidapcode - học lập trình online miễn phí"

Dòng này truy cập vào trong DOM, thay đổi text của thành phần này. 

Thêm directive vào thẻ HTML

Tiếp theo, ta thêm directive vào thành phần bất kì. Ở đây mình thêm ngay trong thẻ h1:

app.component.html

<div style="text-align:center">
// Thêm directive vào trong thẻ h1
  <h1 appChangeText>
    {{title}}
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<div> Months :
  <select (change)="changemonths($event)">
      <option *ngFor="let i of months">{{i}}</option>
  </select>
</div>
 
<p *ngIf="is_available; then true_condition else false_condition">Điểu kiện đúng trong thẻ ngIf</p>
<ng-template #true_condition><p>Điều kiện đúng trong template</p></ng-template>
<ng-template #false_condition><p>Điều kiện sai trong template</p></ng-template>
<button (click)="myClickFunction($event)">Click Me</button>     

Ta được kết quả như hình dưới

Nội dung bài directive trong Angular 4 đến đây là hết rồi. Trong bài sau, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Hy vọng với bài viết về Ví dụ directive trong Angular 4 đã giải đáp giúp bạn phần nào về kiến thức lập trình AngularJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!