Angular のディレクティブについて話しましょう-jsチュートリアル-php.cn

Angular のディレクティブについて話しましょう

青灯夜游

リリース： 2021-06-17 10:25:18

転載

2712 人が閲覧しました

この記事では、Angular のディレクティブを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular のディレクティブについて話しましょう

#環境:

Angular CLI: 11.0.6
Angular: 11.0.7
ノード: 12.18.3
npm : 6.14.6
IDE: Visual Studio コード

1.概要

ディレクティブは、Angular 1.0 時代 (当時は AngularJS と呼ばれていました) に非常に人気がありましたが、現在はあまり使用されていません。命令（ディレクティブ）は既存の要素（DOM）を拡張するために使用されると簡単に理解できます。 [関連チュートリアルの推奨事項: "

angular チュートリアル"]

2. コンポーネントと命令の関係

If If Angular のソースコードを見ると、次の定義が確認できます。

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

ログイン後にコピー

はい、コンポーネントはディレクティブから派生しています。つまり、コンポーネントはディレクティブに属しています。

2.1. 命令の種類

コンポーネントはディレクティブのサブインターフェースであり、特別な命令です。は HTML テンプレートを持つことができますが、ディレクティブはテンプレートを持つことができません。
属性タイプのディレクティブ: DOM 要素の外観と動作を変更するために使用されますが、DOM 構造は変更されません。Angular の組み込み命令の典型的な属性タイプのディレクティブには、ngClass と ngClass が含まれます。 ngStyle. 独自のコンポーネントライブラリをカプセル化する場合は、属性タイプの命令が必要です。
構造命令: DOM 構造を変更できます。組み込みの共通構造命令には、
*ngFor、*ngIf、## が含まれます。 #* ngSwitch。構造ディレクティブは DOM 構造を変更するため、同じ HTML タグで複数の構造ディレクティブを同時に使用することはできません。同じ HTML 要素で複数の構造ディレクティブを使用する場合は、外側の空のレイヤー (p) など、要素の空のレイヤーを追加して要素をネストすることを検討できます。

3. Angular での命令の目的

命令は、HTML ネイティブを含む DOM の機能を強化するために Angular で使用されます。 DOM と独自のカスタムコンポーネント。たとえば、ボタンを拡張して、クリック後にサーバーが応答するまでの二次クリックを回避したり、特定の収入コンテンツを強調表示したりすることができます。

4. コマンド例

# #4.1. コマンド関数

コマンドを実装すると、マウスを上に移動すると背景が黄色で表示され、マウスを離すと通常に戻ります。

4.2. Anuglar CLI は基本ファイルを生成します

ng generate directive MyHighlight

ログイン後にコピー

Anuglar CLI は html、css、ut およびその他のファイルを自動的に生成します。

#4.3. ディレクティブ命令コアコード

import { Directive, ElementRef } from &#39;@angular/core&#39;;

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

    @HostListener(&#39;mouseenter&#39;) onMouseEnter() {
        this.highlight(&#39;yellow&#39;);
    }

    @HostListener(&#39;mouseleave&#39;) onMouseLeave() {
        this.highlight(null);
    }

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

ログイン後にコピー

4.4. この命令を使用する

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

ログイン後にコピー

my-highlight
は要素の拡張属性 (命令、ディレクティブ) です。
5. 概要

ディレクティブは、DOM 要素またはコンポーネントの機能を拡張するために使用されます。 Angular の

*ngFor
、
*ngIf
、および *ngSwitch はすべて Angular の組み込み命令です。プログラミング関連の知識について詳しくは、
プログラミングビデオ
をご覧ください。！
以上がAngular のディレクティブについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。