Angular中的指令Directive有什么用

本篇內(nèi)容主要講解“Angular中的指令Directive有什么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Angular中的指令Directive有什么用”吧!

環(huán)境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. 摘要

指令（Directive）在Angular 1.0時(shí)代（當(dāng)時(shí)叫AngularJS）是很流行的，現(xiàn)在用到的偏少。可以簡(jiǎn)單理解為，指令（Directive）用于擴(kuò)展已有Element（DOM）。

2. 組件與指令之間的關(guān)系

如果去看Angular源碼，可以看到下面定義

/**
 * Supplies configuration metadata for an Angular component.
 *
 * @publicApi
 */
export declare interface Component extends Directive {

是的，Component派生于Directive，也就是說，Component屬于Directive。

2.1. 指令的種類

• Component 是 Directive 的子接口，是一種特殊的指令，Component 可以帶有 HTML 模板，Directive 不能有模板。

• 屬性型指令：用來修改 DOM 元素的外觀和行為，但是不會(huì)改變DOM 結(jié)構(gòu)，Angular 內(nèi)置指令里面典型的屬性型指令有 ngClass、ngStyle，如果打算封裝自己的組件庫，屬性型指令是必備的內(nèi)容。

• 結(jié)構(gòu)型指令：可以修改 DOM 結(jié)構(gòu)，內(nèi)置的常用結(jié)構(gòu)型指令有 *ngFor、*ngIf 和 *ngSwitch。由于結(jié)構(gòu)型指令會(huì)修改 DOM 結(jié)構(gòu)，因而同一個(gè) HTML 標(biāo)簽上面不能同時(shí)使用多個(gè)結(jié)構(gòu)型指令。如果要在同一個(gè) HTML 元素上面使用多個(gè)結(jié)構(gòu)性指令，可以考慮加一層空的元素來嵌套，比如在外面套一層空的（p) 。

3. Angular 中指令的用途

Angualr中用指令來增強(qiáng)DOM的功能，包括 HTML 原生DOM和我們自己自定義的組件（Component）。舉例來說，可以擴(kuò)展一個(gè)Button，實(shí)現(xiàn)避免點(diǎn)擊后，服務(wù)器端未響應(yīng)前的二次點(diǎn)擊；高亮某些收入內(nèi)容等等。

4. 指令舉例

4.1. 指令功能

實(shí)現(xiàn)一個(gè)指令，鼠標(biāo)移動(dòng)到上面時(shí)， 背景顯示為黃色，鼠標(biāo)移開，恢復(fù)正常。

4.2. Anuglar CLI生成基本文件

ng generate directive MyHighlight

Anuglar CLI自動(dòng)生成html、css、ut等文件。

4.3. Directive指令核心代碼

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }

    @HostListener('mouseenter') onMouseEnter() {
        this.highlight('yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

4.4. 使用該指令

<p my-highlight>Highlight me!</p>

my-highlight 即我們的元素?cái)U(kuò)展屬性（指令、directive）。

5. 總結(jié)

• 指令（Directive）用于擴(kuò)展DOM 元素或組件的功能。

• Angular中的 *ngFor、*ngIf 和 *ngSwitch 都是Angular內(nèi)置的指令。

到此，相信大家對(duì)“Angular中的指令Directive有什么用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！