Directive Là Gì

     
1 Directives là gì?

Directives là một đối tượng người sử dụng giúp chúng ta dễ dàng biến đổi một đối tượng người sử dụng khác và cách vận dụng rất đơn giản và dễ dàng và linh hoạt. Directives rất có thể hiểu như là những đoạn mã typescript (hoặc javascript) tất nhiên cả HTML và khi hotline thì gọi như thể HTML luôn. Ví dụ:

div *ngIf="time"> Time: time div>2. Phân các loại directivesTừ Angular 2 trở đi, directives được phân chia làm những loại sau đây:

Components directives: không tồn tại nghi ngờ gì khi điện thoại tư vấn component là directive cũng được, vì ví dụ là component được cho phép định nghĩa selector và hotline ra như 1 thẻ html tag ()Structural directives: Là directive cấu trúc, dùng để làm vẽ html, hiển thị data lên đồ họa html, và biến hóa cấu trúc DOM bằng bài toán thêm giảm các phần tử trong DOM. Các structural directive thông thường có dấu "*" sinh hoạt trước của directive. Ví dụ như *ngFor, *ngIfAttribute directives: thay đổi giao diện, can hệ của các đối tượng người sử dụng hoặc chuyển đổi directive không giống hoặc thêm những thuộc tính động mang lại element html. Lấy ví dụ như *ngStyle3. Components directives

Components directives được thực hiện rất thịnh hành , chúng ta có xem tại trên đây Components directives. Sau đây, bản thân sẽ trình diễn ngắn gọn về directives này.

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

Components là 1 trong khối code trong ứng dụng Angular. Nó là sự phối hợp của cỗ template html (bộ size html) cùng nhúng kèm code TypeScript (hoặc Javascript). Các components là chủ quyền với nhau và tự do với hệ thống. Nó hoàn toàn có thể được tải vào hoặc cởi ra khỏi khối hệ thống dễ dàng. Một component có thể hiểu như một control trên màn hình hiển thị, bao gồm giao diện html với code lô ghích xử lý sự kiện kèm theo control đó. Một component cũng rất có thể to lớn như thể cả 1 màn hình chứa đựng nhiều control hoặc một nhóm nhiều màn hình. Có nghĩa là là một component cũng có thể chứa với gọi được nhiều component không giống nối vào. Như vậy Angular linh thiêng hoạt trong việc chia nhỏ dại code ra các component.

Trong Angular họ khai báo một Component với cấu trúc như sau:

import Component from "
angular/core";
Component( selector: "app-hello-world", template: `Hello Angular world`)export class HelloWorld Như chúng ta thấy từ bỏ khóa
Component sẽ giúp đỡ định nghĩa ra một bộ khung html mang lại nó. Và dưới là một class HelloWorld dùng làm viết code logic. Vào định nghĩa bộ khung html, chúng ta có một vài thuộc tính cần để ý sau đây:

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

Sau đây, mình sẽ trình bày một vài structural directives cơ bạn dạng và thông dụng. Ngoại trừ ra bạn cũng có thể tham khảo với xem cụ thể tại trên đây Stuctural directives

4.1 Ng-if… else

Có tính năng kiểm tra điều kiện ngay ở html. Ví dụ:

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

Như ta thấy dùng loại directive ngIf else này rất thuận tiện khi hoàn toàn có thể ẩn hiện html dễ dàng.

4.2 Ng-Template

Nó giúp gom viên html bắt buộc ẩn hiện.

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á đầy đủ hơn của 4.1 Ng-if… else

4.3 Ng-Container

Tương tự như 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ư là cơ mà tag sẽ tiến hành ẩn đi, giúp cho layout css không trở nên vỡ nếu như bạn gom html (Không sợ bị nhảy từ div thân phụ sang div con, cấu trúc html không hề đổi khác khi gom vào tag )

Xét lấy một ví dụ sau:

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

*

Khi soi html họ sẽ thấy:

*

Tự dưng mẫu div bao gồm ngIf này lại chèn một cái thuộc tính _ngcontent-c0, dẫn đến loại đó bị xuống dòng, có tác dụng sai layout design.

Bây giờ đồng hồ hãy viết lại như sau:

Welcome ng-container *ngIf="title">to i>thei> title world.ng-container>Kết quả đã thật đẹp nhất ngay:

*

Đó bởi vì html đã làm đượ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 điều kiện switch case trong Angular giống hệt 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 hợp muốn dùng switch case default (nếu toàn thể case k thỏa màn thì vào default).

Xem thêm: Chỉ Tiêu Tuyển Sinh Đại Học Lao Đông Xã Hội Xét Học Bạ 2021 2022 Mới Nhất

5. Attribute directive

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

5.1 phát hành một attributes directive đơn giản.

Implement đến directive. Bạn cũng có thể sử dụng CLI command để chế tạo ra đối tượng người dùng directive.

ng generate directive highlightCLI sẽ tạo ra tệp tin src/app/highlight.directive.ts và khai báo nó trong 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 yêu cầu requires decorate class đối tượng người dùng Directive của angular bằng các dùng
Directive trước class. Ví dụ ngơi nghỉ trên đấy là HighlightDirective mục tiêu sẽ làm biến hóa màu background của đối tượng khi người dùng hover qua nó.

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

Bây giờ bọn họ hãy implement mang lại cho HighlightDirective để làm thay đổi màu background:

import Directive, ElementRef from "
Directive( selector: "")export class HighlightDirective constructor(el: ElementRef) el.nativeElement.style.backgroundColor = "yellow"; ElementRef là Class trong thư viện của angular. Chúng ta dùng ElementRef vào hàm construct nhằm inject nó tham chiếu cho các thành phần DOM trong component hiện nay tại. Kế tiếp chi đề xuất gọi thuộc tính ElementRef để lấy về đối tượng người dùng DOM để biến đổi style background sang mày vàng.

5.2 Áp dụng attribute directive

Để sử dụng HighlightDirective, ta thêm thẻ như sau:

p appHighlight>Highlight me!p>

5.3 liên can directive với người dùng

Hiện trên appHighlight chỉ mix màu thay dịnh mang đến background, không hề gồm sự linh hoạt và tác động nào. Họ sẽ implement nó để biến hóa màu cho những sự kiện loài chuột và người tiêu dùng hành động. Trước tiên đề xuất import HostListener.

import Directive, ElementRef, HostListener from "
angular/core";Tiếp theo là thêm hàm xử trí khi sự kiện 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.backgroundColor = color;
HostListener decorator đang theo dõi cùng bắt những sự khiếu nại của bộ phận trong DOM mà bao gồm dử dụng directive appHighlight Hàm highlight sẽ đổi khác background màu sắc theo màu được truyền vào tham số, nên trong các hàm xử lý chỉ việc gọi cho tới highlight với thông số là màu đề xuất hiển thị. Chạy và kiểm tra kêt trái nhé.

5.4 Truyền tài liệu vào directive trải qua Input

Hiện tại các màu cho các sự kiện vẫn là cố định, sử dụng chỗ nào thì những màu vẫn vậy . Để làm cho tính linh hoạt mang lại directive họ sẽ truyền các màu vào mang lại nó. Đầu tiên đề xuất import Input:

import Directive, ElementRef, HostListener, input from "
Input() highlightColor: string;Sử dụng kết hợp appHighlight với input binding mang lại đối tượng.

p appHighlight highlightColor="yellow">Highlighted in yellowp>p appHighlight =""orange"">Highlighted in orangep>Đó là cách thực hiện ban đầu, tuy nhiên directive đã được nâng cao để tinh giảm code và dễ dãi hơn bằng phương pháp sử dụng director như một thuộc tính (đây là nguyên nhân vì sao selector của nó có dấu <>)

p ="color">Highlight me!p>Thuộc tính là sự kết hợp của highlighting directive cùng set àu cho biến đổi appHighlight bọn họ cũng có thể đổi tên mang lại biến còn nếu như không muốn để tên biến chuyển là appHighlight theo selector


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

Xem thêm: Hướng Dẫn Cách Vẽ Trên Zoom Máy Tính Cho Học Sinh Vẽ Trên Zoom

p ="color" defaultColor="violet"> Highlight me too!p>
Input() defaultColor: string;Angular đang tự hiểu bạn binding defaultColor cho HighlightDirective vì các bạn đã khai báo decorator Input mang lại nó. Binding thêm một defaultColor thông qua input để làm màu mặc định. Trong hàm xử lý cho sự kiện chuột biến đổi như sau:


HostListener("mouseenter") onMouseEnter()

5.5 hoàn thành xong ứng dụng solo giả này.

Update file app.component.html:

h1>My First Attribute Directiveh1>h4>Pick 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/app.component.ts:

import Directive, ElementRef, HostListener, đầu vào 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 hiểu về Directives của mình đến đây là kết thúc. Mong muốn nó sẽ có ích phần nào đó cho chúng ta trong quá trình tìm hiểu tương tự như đang có tác dụng về Angular. Bài viết cũng cạnh tranh tránh khỏi đều sai xót, ao ước mọi người thông cảm, và rất ao ước những chủ kiến đóng góp của mọi fan để nội dung bài viết được hoàn thiện hơn