Tìm hiểu Directives trong Angular 7

Directives trong Angular là một class js khai bao @directive ở trong angular có 3 cách khai báo.

Component Directives

Các lớp này tạo thành lớp chính có chi tiết về cách thành phần sẽ được xử lý, khởi tạo và sử dụng trong thời gian chạy.

Structural Directives

Một chỉ thị cấu trúc về cơ bản giải quyết việc thao tác các phần tử dom. Các chỉ thị cấu trúc có dấu * trước chỉ thị. Ví dụ, * ngIf và * ngFor.

Attribute Directives

Các chỉ thị thuộc tính xử lý việc thay đổi giao diện và hành vi của phần tử dom. Bạn có thể tạo các chỉ thị của riêng mình như được giải thích trong phần bên dưới.

Cách thiết lập Directives

Trong phần này, chúng ta sẽ thảo luận về cách tùy chỉnh Directives được sử dụng trong các Component. Các lệnh tùy chỉnh do chúng tôi tạo ra và không phải là tiêu chuẩn.

Hãy để chúng tôi xem cách tạo tùy chỉnh Directives. Chúng tôi sẽ tạo chỉ thị bằng cách sử dụng dòng lệnh. Lệnh tạo chỉ thị bằng dòng lệnh như sau:

ng g directive nameofthedirective 

e.g 

ng g directive changeText

chúng ta import file directive trong app.module.ts

import { BrowserModule } from'@angular/platform-browser'; 

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; 

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, 

      AppRoutingModule 

   ], 

   providers: [], 

   bootstrap: [AppComponent] 

}) 

export class AppModule { }

Trong class ChangeTextDirective chúng ta phải include các file declaration

change-text.directive

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

@Directive({

   selector: '[changeText]'

})

export class ChangeTextDirective {

   constructor() { }

}

Trong file htmp app.component.html chúng ta thiết lập bộ cục view

<div style = "text-align:center"> 

   <h1> Welcome to {{title}}. </h1> 

</div>

<div style = "text-align:center"> 

   <span changeText >Welcome to {{title}}.</span> 

</div>

Bây giờ chúng ta thiết lập trong file change-text.directive.ts

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

@Directive({

   selector: '[changeText]'

})

export class ChangeTextDirective {

   constructor(Element: ElementRef) {

      console.log(Element);

      Element.nativeElement.innerText = "Text is changed by changeText Directive.";

   }

}

Kết quả: