Directive Là Gì

1 Directives là gì?

Directives là một trong đối tượng người sử dụng giúp họ dễ dãi thay đổi một đối tượng người dùng không giống cùng bí quyết vận dụng siêu đơn giản và dễ dàng và linh hoạt. Directives hoàn toàn có thể gọi như thể các đoạn mã typescript (hoặc javascript) tất nhiên cả HTML cùng khi call thì Call như là HTML luôn luôn. Ví dụ:

div *ngIf="time"> Time: time div>2. Phân một số loại directivesTừ Angular 2 trnghỉ ngơi đi, directives được chia thành các một số loại sau đây:

Components directives: Không gồm nghi hoặc gì khi Hotline component là directive sầu cũng rất được, vày rõ ràng là component chất nhận được có mang selector cùng Điện thoại tư vấn ra nhỏng một thẻ html tag ()Structural directives: Là directive kết cấu, dùng làm vẽ html, hiển thị data lên hình ảnh html, và thay đổi cấu tạo DOM bởi câu hỏi thêm sút các phần tử vào DOM. Các structural directive thông thường có lốt "*" ngơi nghỉ trước của directive sầu. ví dụ như *ngFor, *ngIfAttribute directives: Txuất xắc đổi đồ họa, liên tưởng của các đối tượng người dùng hoặc đổi khác directive sầu không giống hoặc thêm các thuộc tính rượu cồn đến element html. ví dụ *ngStyle3. Components directives

Components directives được sử dụng khôn cùng phổ biến , chúng ta tất cả xem trên phía trên Components directives. Sau phía trên, mình vẫn trình bày nthêm gọn về directives này.

Bạn đang xem: Directive là gì

Components là 1 kăn năn code vào tiện ích Angular. Nó là sự phối kết hợp của cục template html (bộ form html) với nhúng kèm code TypeScript (hoặc Javascript). Các components là hòa bình với nhau cùng tự do cùng với hệ thống. Nó hoàn toàn có thể được cài vào hoặc dỡ ra khỏi khối hệ thống tiện lợi. Một component có thể đọc nhỏng một control bên trên màn hình hiển thị, bao gồm giao diện html và code súc tích giải pháp xử lý sự khiếu nại đi kèm control đó. Một component cũng rất có thể khổng lồ mập như thể cả 1 screen đựng được nhiều control hoặc một đội nhiều màn hình. Tức là là 1 trong component cũng có thể cất và Call được rất nhiều component không giống nối vào. do vậy Angular rất linh thiêng hoạt vào vấn đề phân tách nhỏ tuổi code ra các component.

Trong Angular bọn họ knhì báo một Component với cấu trúc nlỗi sau:

import Component from "
angular/core";
Component( selector: "app-hello-world", template: `Hello Angular world`)export class HelloWorld Như bọn họ thấy tự khóa
Component để giúp đỡ định nghĩa ra một bộ khung html mang đến nó. Và dưới là một trong class HelloWorld dùng làm viết code súc tích. Trong quan niệm cỗ form html, chúng ta có một số nằm trong tính bắt buộc để ý sau đây:

selector : Là thương hiệu được đặt để call một component trong code html. Ở ví dụ vừa rồi, từ bỏ khóa app-hello-world chọn cái tên cho component này. khi bắt buộc điện thoại tư vấn component này ra nghỉ ngơi screen html cha, ta đã gọi bằng html tag . Call điều đó thì component con sẽ tiến hành render ra component cha.template : Là tự định nghĩa form html mang đến component dạng string sinh hoạt vào file này luôn. lấy ví dụ như sinh sống bên trên chỉ định và hướng dẫn nghĩa một thẻ html h1 đơn giản. Cách này chỉ cần sử dụng mang đến component đơn giản.templateUrl : Là băng thông url tới tệp tin html bên phía ngoài để load file kia vào làm size html đến component này. Đây là cách code hay sử dụng vì được cho phép tách bóc riêng rẽ size html thoát khỏi code xúc tích, fan có tác dụng thiết kế vẫn sửa file html riêng biệt, tự do với những người có tác dụng code.styles : Là viết style css luôn vào file component này. Cách này chỉ dùng mang lại component đơn giản và dễ dàng.styleUrls : Là băng thông url mang đến tệp tin style css tự do mang lại component này. Cách này khuyên cần sử dụng bởi file css yêu cầu để dành riêng cho tất cả những người designer va vào.4. Structural directives

Sau phía trên, bản thân vẫn trình bày một vài ba structural directives cơ bạn dạng và phổ cập. Bên cạnh đó bạn có thể tìm hiểu thêm cùng coi chi tiết tại trên đây Stuctural directives

4.1 Ng-if… else

Có chức năng kiểm tra ĐK tức thì sống html. Ví dụ:

div *ngIf="time; else noTime"> Time: timediv>ng-template #noTime> No time. ng-template>Code sống bên trên, lúc biến time có mức giá trị, thì chuỗi Time: được show ra. Và cục #noTime template bị ẩn đi, ngược trở lại thì điều kiện else được chạy với #noTime được hiển thị.

Nhỏng ta thấy dùng cái directive sầu ngIf else này vô cùng tiện nghi khi hoàn toàn có thể ẩn hiện html thuận lợi.

4.2 Ng-Template

Nó giúp gom cục html đề xuất ẩn hiện tại.

div *ngIf="isTrue; then tmplWhenTrue else tmplWhenFalse">div>ng-template #tmplWhenTrue >I show-up when isTrue is true. ng-template>ng-template #tmplWhenFalse > I show-up when isTrue is false ng-template>Cách viết này tương đối đầy đủ rộng của 4.1 Ng-if… else

4.3 Ng-Container

Tương trường đoản cú nlỗi Ng-Template dùng làm gom html. Nhưng ưu thế của Ng-Container là thẻ directive này sẽ không render ra tag html như là cơ mà tag sẽ được ẩn đi, hỗ trợ cho layout css không xẩy ra vỡ nếu như khách hàng gom html (Không hại bị nhảy từ bỏ div cha thanh lịch div con, cấu tạo html không thể biến hóa Khi gom vào tag )

Xét ví dụ sau:

Welcome div *ngIf="title">lớn i>thei> title world.div>Sẽ được render ra như sau:

lúc soi html chúng ta đang thấy:

Tự dưng mẫu div gồm ngIf nó lại cnhát một cái ở trong tính _ngcontent-c0, dẫn mang đến chiếc kia bị xuống mẫu, có tác dụng không nên layout kiến thiết.

Bây giờ hãy viết lại nlỗi sau:

Welcome ng-container *ngIf="title">khổng lồ i>thei> title world.ng-container>Kết trái vẫn thật đẹp ngay:

Đó là vì html đã có dọn gọn gàng gàng:

4.4 NgSwitch and NgSwitchCase

Chúng ta trọn vẹn có thể áp dụng câu lệnh ĐK switch case trong Angular y như switch case trong Javascript vậy.

div ="isMetric"> div *ngSwitchCase="true">Degree Celsiusdiv> div *ngSwitchCase="false">Fahrenheitdiv> div *ngSwitchDefault>Default div>div>*ngSwitchDefault Trong trường thích hợp mong muốn dùng switch case mặc định (ví như toàn thể case k thỏa màn thì vào default).

Xem thêm:

5. Attribute directive

Được sử dụng nhỏng một thuộc tính của đối tượng, cho nên vì thế lúc build thì directive sầu với các thuộc tính thông thường không giống được build cùng một lúc dẫn cho dự thay đổi của directive là bên cạnh đó Lúc render đối tượng người dùng đó.

5.1 Xây dựng một attributes directive sầu đơn giản.

Implement mang lại directive sầu. Chúng ta có thể thực hiện CLI command để tạo ra đối tượng directive.

ng generate directive sầu highlightCLI sẽ khởi tạo ra file src/app/highlight.directive.ts cùng knhì báo nó vào AppModule Cấu trúc của tệp tin src/app/highlight.directive.ts

import Directive from "
Directive( selector: "")export class HighlightDirective constructor() Một attribute directive sầu đề xuất requires decorate class đối tượng Directive của angular bởi các sử dụng
Directive sầu trước class. ví dụ như sống trên đây là HighlightDirective mục tiêu đang làm cho đổi khác màu sắc background của đối tượng người tiêu dùng Khi người dùng hover qua nó.

Import định danh Directive để thực hiện nó decorate mang đến đối tượng người dùng vào angular. call
Directive trước class HighlightDirective là nhằm sư dụng decorate, Khi sử dùng chúng ta buộc phải knhị báo thương hiệu selector nhằm sử dụng nhỏng một nằm trong tính, vệt (<>) là bí quyết nhưng angular phát âm nó là 1 trong trực thuộc tính, khi biên dịch cơ mà thấy bộ phận làm sao tất cả nằm trong tính có tên là appHighlight sẽ được áp dụng thay đổi vì directive. (Sau Lúc sử dụng
Directive sầu, nhớ rằng export class HighlightDirective sầu nhằm có thể import cùng áp dụng.)

Bây tiếng bọn họ hãy implement mang lại đến HighlightDirective sầu để gia công đổi khác màu background:

import Directive sầu, ElementRef from "
Directive( selector: "")export class HighlightDirective sầu constructor(el: ElementRef) el.nativeElement.style.backgroundMàu sắc = "yellow"; ElementRef là Class trong tlỗi viện của angular. Chúng ta dùng ElementRef trong hàm construct để inject nó tham mê chiếu mang lại các phần tử DOM trong component bây giờ. Sau kia chi bắt buộc Call trực thuộc tính ElementRef để mang về đối tượng người tiêu dùng DOM nhằm chuyển đổi style background quý phái ngươi xoàn.

5.2 Áp dụng attribute directive

Để dùng HighlightDirective, ta thêm thẻ nhỏng sau:

p appHighlight>Highlight me!p>

5.3 Tương tác directive sầu với những người dùng

Bây Giờ appHighlight chỉ phối color gắng dịnh cho background, không hề bao gồm sự linc hoạt và liên can làm sao. Chúng ta đang implement nó nhằm biến hóa màu sắc cho những sự kiện loài chuột với người tiêu dùng hành vi. Trước tiên nên import HostListener.

import Directive, ElementRef, HostListener from "
angular/core";Tiếp theo là thêm hàm cách xử lý lúc sự khiếu nại xẩy ra bằng cách dử dụng Decorator HostListener.

HostListener("mouseleave") onMouseLeave() this.highlight(null);private highlight(color: string) this.el.nativeElement.style.backgroundmàu sắc = color;
HostListener decorator vẫn quan sát và theo dõi với bắt những sự kiện của bộ phận vào DOM nhưng tất cả dử dụng directive appHighlight Hàm highlight đã biến hóa background color theo color được truyền vào tđắm đuối số, cần trong số hàm xử trí chỉ việc gọi cho tới highlight cùng với tmê man số là màu sắc đề nghị hiển thị. Chạy với soát sổ kêt quả nhé.

5.4 Truyền dữ liệu vào directive thông qua Input

Lúc Này những màu sắc cho các sự kiện vẫn luôn là cố định và thắt chặt, áp dụng chỗ nào thì những màu vẫn vậy . Để tạo nên tính linc hoạt đến directive sầu bọn họ sẽ truyền những color vào cho nó. trước hết bắt buộc import Input:

import Directive sầu, ElementRef, HostListener, Input from "
Input() highlightColor: string;Sử dụng phối kết hợp appHighlight và đầu vào binding mang đến đối tượng.

p appHighlight highlightColor="yellow">Highlighted in yellowp>p appHighlight =""orange"">Highlighted in orangep>Đó là bí quyết sử dụng lúc đầu, nhưng lại directive sầu đã có được cải thiện nhằm rút ngắn code cùng thuận lợi hơn bằng phương pháp sử dụng director nlỗi một thuộc tính (đây là nguyên nhân vì sao selector của chính nó gồm vết <>)

p ="color">Highlight me!p>Thuộc tính là sự việc kết hợp của highlighting directive sầu cùng set àu mang đến biến appHighlight Chúng ta cũng có thể thay tên mang lại đổi mới nếu không mong mỏi khắc tên biến chuyển là appHighlight theo selector

Input("appHighlight") highlightColor: string;Chúng ta cũng trọn vẹn hoàn toàn có thể phối kết hợp phương pháp bên trên cùng với input đầu vào binding thông thường.

p ="color" defaultColor="violet"> Highlight me too!p>
Input() defaultColor: string;Angular vẫn trường đoản cú gọi chúng ta binding defaultColor mang đến HighlightDirective sầu vị bạn đã knhì báo decorator Input mang lại nó. binding thêm 1 defaultMàu sắc thông qua đầu vào để triển khai màu khoác định. vào hàm cách xử trí cho sự khiếu nại chuột biến hóa nhỏng sau:

HostListener("mouseenter") onMouseEnter() this.highlight(this.highlightMàu sắc

5.5 Hoàn thiện ứng dụng đối kháng giả này.

Update tệp tin phầm mềm.component.html:

h1>My First Attribute Directiveh1>h4>Piông chồng a highlight colorh4>div> input đầu vào type="radio" name="colors" (click)="color="lightgreen"">Green đầu vào type="radio" name="colors" (click)="color="yellow"">Yellow input đầu vào type="radio" name="colors" (click)="color="cyan"">Cyandiv>p ="color">Highlight me!File src/app/ứng dụng.component.ts:

import Directive sầu, ElementRef, HostListener, Input from "
Directive( selector: "")export class HighlightDirective sầu color: string; constructor(private el: ElementRef)
HostListener("mouseleave") onMouseLeave() this.highlight(null); private highlight(color: string) this.el.nativeElement.style.backgroundmàu sắc = color; Kết luậnBài khám phá về Directives của bản thân mình cho đấy là xong. Hy vọng nó đã có ích phần như thế nào đó cho chúng ta vào quá trình tò mò cũng giống như sẽ làm cho về Angular. Bài viết cũng khó rời khỏi phần nhiều không nên xót, ước ao phần đa tín đồ cảm thông, và khôn xiết ước ao rất nhiều chủ ý góp sức của hầu như bạn nhằm nội dung bài viết được hoàn thành hơn