Angular中的指令Directive有什么用

本篇內容主要講解“Angular中的指令Directive有什么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Angular中的指令Directive有什么用”吧!

環境:

• 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時代（當時叫AngularJS）是很流行的，現在用到的偏少。可以簡單理解為，指令（Directive）用于擴展已有Element（DOM）。

2. 組件與指令之間的關系

如果去看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 元素的外觀和行為，但是不會改變DOM 結構，Angular 內置指令里面典型的屬性型指令有 ngClass、ngStyle，如果打算封裝自己的組件庫，屬性型指令是必備的內容。

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

3. Angular 中指令的用途

Angualr中用指令來增強DOM的功能，包括 HTML 原生DOM和我們自己自定義的組件（Component）。舉例來說，可以擴展一個Button，實現避免點擊后，服務器端未響應前的二次點擊；高亮某些收入內容等等。

4. 指令舉例

4.1. 指令功能

實現一個指令，鼠標移動到上面時， 背景顯示為黃色，鼠標移開，恢復正常。

4.2. Anuglar CLI生成基本文件

ng generate directive MyHighlight

Anuglar CLI自動生成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 即我們的元素擴展屬性（指令、directive）。

5. 總結

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

• Angular中的 *ngFor、*ngIf 和 *ngSwitch 都是Angular內置的指令。

到此，相信大家對“Angular中的指令Directive有什么用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！