Directive Là Gì

1 Directives là gì?

Directives là một đối tượng người tiêu dùng giúp chúng ta thuận tiện thay đổi một đối tượng người sử dụng không giống và cách áp dụng khôn xiết đơn giản với linc hoạt. Directives rất có thể phát âm như thể các đoạn mã typescript (hoặc javascript) tất nhiên cả HTML và khi Call thì hotline như là HTML luôn luôn. Ví dụ:

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

Components directives: Không có nghi ngại gì Khi Điện thoại tư vấn component là directive cũng khá được, bởi vì ví dụ là component được cho phép khái niệm selector với call ra nlỗi một thẻ html tag ()Structural directives: Là directive sầu kết cấu, dùng làm vẽ html, hiển thị data lên hình ảnh html, cùng biến hóa cấu tạo DOM bởi câu hỏi thêm giảm các phần tử trong DOM. Các structural directive sầu thông thường sẽ có vệt "*" sống trước của directive. lấy ví dụ *ngFor, *ngIfAttribute directives: Txuất xắc đổi bối cảnh, tác động của các đối tượng hoặc biến hóa directive khác hoặc thêm các ở trong tính đụng cho element html. ví dụ *ngStyle3. Components directives

Components directives được áp dụng khôn cùng phổ cập , bạn gồm coi tại phía trên Components directives. Sau đây, mình đang trình diễn nlắp gọn gàng về directives này.

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

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

Trong Angular họ knhì báo một Component với cấu tạo nhỏng sau:

import Component from "
angular/core";
Component( selector: "app-hello-world", template: `Hello Angular world`)export class HelloWorld Nhỏng họ thấy từ bỏ khóa
Component để giúp khái niệm ra một bộ khung html mang đến nó. Và dưới là 1 trong những class HelloWorld dùng để làm viết code xúc tích. Trong có mang bộ khung html, bọn họ gồm một số trong những ở trong tính buộc phải chú ý sau đây:

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

Sau trên đây, mình đang trình diễn một vài ba structural directives cơ bạn dạng và phổ cập. Hình như bạn có thể tìm hiểu thêm cùng coi cụ thể tại trên đây Stuctural directives

4.1 Ng-if… else

Có tác dụng bình chọn điều kiện tức thì ở html. Ví dụ:

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

Như ta thấy dùng dòng directive ngIf else này hết sức tiện nghi lúc có thể ẩn hiện html tiện lợi.

4.2 Ng-Template

Nó góp gom cục html phải ẩ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 không hề thiếu hơn của 4.1 Ng-if… else

4.3 Ng-Container

Tương từ bỏ nlỗi Ng-Template dùng để gom html. Nhưng điểm mạnh của Ng-Container là thẻ directive này sẽ không render ra tag html như thể nhưng tag sẽ được ẩn đi, hỗ trợ cho layout css không trở nên vỡ nếu bạn gom html (Không sợ bị nhảy đầm từ bỏ div thân phụ sang trọng div bé, cấu tạo html không thể chuyển đổi khi gom vào tag )

Xét ví dụ sau:

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

Lúc soi html bọn họ đang thấy:

Tự dưng cái div bao gồm ngIf này lại ckém một cái nằm trong tính _ngcontent-c0, dẫn mang đến mẫu kia bị xuống cái, làm sai layout kiến thiết.

Bây tiếng hãy viết lại như sau:

Welcome ng-container *ngIf="title">to i>thei> title world.ng-container>Kết trái sẽ thật rất đẹp ngay:

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

4.4 NgSwitch và NgSwitchCase

Chúng ta hoàn toàn rất có thể sử dụng câu lệnh ĐK switch case vào Angular y hệt như switch case vào Javascript vậy.

div ="isMetric"> div *ngSwitchCase="true">Degree Celsiusdiv> div *ngSwitchCase="false">Fahrenheitdiv> div *ngSwitchDefault>Default div>div>*ngSwitchDefault Trong trường phù hợp ước ao sử dụng switch case mặc định (trường hợp cục bộ case k thỏa màn thì vào default).

Xem thêm: Legal Counsel Là Gì ? Định Nghĩa, Ví Dụ, Giải Thích Tìm Hiểu Một Số Chức Danh Trong Law Firm

5. Attribute directive

Được dùng như một ở trong tính của đối tượng người sử dụng, cho nên vì thế Khi build thì directive và những nằm trong tính thông thường khác được build cùng một dịp dẫn đến dự chuyển đổi của directive sầu là đồng thời khi render đối tượng kia.

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

Implement mang đến directive sầu. Chúng ta hoàn toàn có thể áp dụng CLI command nhằm tạo thành đối tượng directive.

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

import Directive from "
Directive( selector: "")export class HighlightDirective sầu constructor() Một attribute directive sầu cần requires decorate class đối tượng người dùng Directive của angular bởi những dùng
Directive trước class. ví dụ như sinh sống bên trên đấy là HighlightDirective sầu mục đích đang có tác dụng chuyển đổi màu background của đối tượng người dùng Lúc người tiêu dùng hover qua nó.

Import định danh Directive sầu nhằm áp dụng nó decorate mang lại đối tượng người sử dụng trong angular. Hotline
Directive trước class HighlightDirective sầu là để sư dụng decorate, lúc sử sử dụng bọn họ phải khai báo thương hiệu selector để thực hiện nlỗi một thuộc tính, vết (<>) là biện pháp nhưng mà angular đọc nó là 1 trong ở trong tính, Lúc biên dịch nhưng mà thấy bộ phận nào tất cả trực thuộc tính có tên là appHighlight sẽ tiến hành áp dụng chuyển đổi vì chưng directive. (Sau Khi sử dụng
Directive, nhớ là export class HighlightDirective nhằm rất có thể import và áp dụng.)

Bây giờ đồng hồ họ hãy implement mang đến đến HighlightDirective để gia công biến hóa màu background:

import Directive, ElementRef from "
Directive( selector: "")export class HighlightDirective 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 sử dụng ElementRef vào hàm construct để inject nó tđam mê chiếu mang đến các bộ phận DOM trong component bây chừ. Sau đó chi nên gọi thuộc tính ElementRef để đưa về đối tượng người dùng DOM nhằm thay đổi style background lịch sự ngươi đá quý.

5.2 Áp dụng attribute directive

Để sử dụng HighlightDirective, ta thêm thẻ nlỗi sau:

p appHighlight>Highlight me!p>

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

Hiện tại appHighlight chỉ mix color thay dịnh mang lại background, chưa hề bao gồm sự linch hoạt và thúc đẩy làm sao. Chúng ta sẽ implement nó nhằm chuyển đổi màu sắc cho những sự kiện loài chuột với người dùng hành động. Thứ nhất nên import HostListener.

import Directive sầu, ElementRef, HostListener from "
angular/core";Tiếp theo là thêm hàm xử lý Lúc sự kiện xẩy ra bằng phương pháp 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 đã theo dõi và quan sát và bắt các sự khiếu nại của thành phần vào DOM cơ mà gồm dử dụng directive appHighlight Hàm highlight vẫn biến hóa background color theo color được truyền vào tđắm say số, phải trong số hàm xử lý chỉ cần Call cho tới highlight với tmê man số là màu đề nghị hiển thị. Chạy cùng chất vấn kêt quả nhé.

5.4 Truyền dữ liệu vào directive sầu trải qua Input

Hiện tại những màu cho các sự kiện vẫn chính là thắt chặt và cố định, áp dụng chỗ nào thì những màu vẫn vậy . Để khiến cho tính linc hoạt cho directive sầu họ đã truyền các màu sắc vào mang lại nó. Thứ nhất yêu cầu import Input:

import Directive sầu, ElementRef, HostListener, Input from "
Input() highlightColor: string;Sử dụng phối hợp appHighlight cùng input đầu vào binding cho đối tượng người tiêu dùng.

p appHighlight highlightColor="yellow">Highlighted in yellowp>p appHighlight =""orange"">Highlighted in orangep>Đó là phương pháp thực hiện ban sơ, tuy vậy directive đã được nâng cao để rút ngắn code cùng thuận lợi hơn bằng cách áp dụng director nlỗi một nằm trong tính (đó là lý do vì chưng sao selector của chính nó có 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 phối àu đến biến appHighlight Chúng ta cũng hoàn toàn có thể đổi tên cho phát triển thành còn nếu như không mong mỏi viết tên biến đổi là appHighlight theo selector

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

p ="color" defaultColor="violet"> Highlight me too!p>
Input() defaultColor: string;Angular sẽ tự hiểu chúng ta binding defaultmàu sắc đến HighlightDirective bởi các bạn sẽ knhị báo decorator Input đến nó. binding thêm một defaultmàu sắc trải qua input đầu vào để làm màu mặc định. trong hàm cách xử lý cho sự khiếu nại con chuột chuyển đổi nhỏng sau:

HostListener("mouseenter") onMouseEnter()

5.5 Hoàn thiện áp dụng đơn đưa này.

Update file ứng dụng.component.html:

h1>My First Attribute Directiveh1>h4>Piông chồng a highlight colorh4>div> input type="radio" name="colors" (click)="color="lightgreen"">Green input type="radio" name="colors" (click)="color="yellow"">Yellow input type="radio" name="colors" (click)="color="cyan"">Cyandiv>p ="color">Highlight me!File src/app/tiện ích.component.ts:

import Directive, ElementRef, HostListener, Input from "
Directive( selector: "")export class HighlightDirective color: string; constructor(private el: ElementRef)
HostListener("mouseleave") onMouseLeave() this.highlight(null); private highlight(color: string) this.el.nativeElement.style.backgroundColor = color; Kết luậnBài tò mò về Directives của mình cho đấy là xong xuôi. Hy vọng nó vẫn có lợi phần làm sao đó cho các bạn vào quá trình tò mò cũng giống như đang làm cho về Angular. Bài viết cũng nặng nề tránh khỏi số đông sai xót, mong mỏi đều fan thông cảm, và hết sức mong phần nhiều ý kiến góp sức của hầu hết bạn nhằm nội dung bài viết được triển khai xong hơn