Angularでカスタムディレクティブを使用および作成する方法

Angularで長い間遊んだ後、私はついにAngularディレクティブのわかりやすい説明を思いつきました。この記事では、最初にディレクティブとは何か、Angularでディレクティブを使用する方法を理解します。独自のカスタムディレクティブも作成します。では、私たちは何を待っているのでしょうか?深く掘り下げてみましょう。

Angularディレクティブとは何ですか?

ディレクティブは、Angularコンパイラがそれを見つけるたびに実行される関数です。Angularディレクティブは、カスタム動作をDOMにアタッチすることにより、HTML要素の機能を強化します。

コアコンセプトから、Angularディレクティブは3つのカテゴリに分類されます。

  1. 属性ディレクティブ
  2. 構造指令
  3. コンポーネント

属性ディレクティブ

属性ディレクティブは、DOM要素の外観と動作を操作する役割を果たします。属性ディレクティブを使用して、DOM要素のスタイルを変更できます。これらのディレクティブは、特定のDOM要素を条件付きで非表示または表示するためにも使用されます。アンギュラは提供し、多くの組み込みのような属性のディレクティブNgStyleNgClassなど我々はまた、私たちの目的の機能のために、当社独自のカスタム属性のディレクティブを作成することができ、。

構造指令

構造ディレクティブは、DOMの構造を変更する責任があります。これらは、要素の外観と動作を変更するだけの属性ディレクティブとは異なり、DOMから要素を追加または削除することによって機能します。

構文を見れば、構造ディレクティブと属性ディレクティブを簡単に区別できます。構造ディレクティブの名前は常にアスタリスク(*)プレフィックスで始まりますが、属性ディレクティブにはプレフィックスが含まれていません。Angularが提供する最も人気のある3つの組み込み構造ディレクティブは、NgIfNgFor、およびNgSwitchです。

コンポーネント

コンポーネントは、テンプレートを使用したディレクティブです。コンポーネントと他の2種類のディレクティブの唯一の違いは、テンプレートです。属性および構造ディレクティブにはテンプレートがありません。したがって、コンポーネントは、テンプレートを備えたディレクティブのよりクリーンなバージョンであり、使いやすいと言えます。

Angular組み込みディレクティブの使用

Angularには、簡単に使用できる組み込みのディレクティブがたくさんあります。このセクションでは、2つの非常に単純な組み込みディレクティブを使用します。

NgStyleディレクティブは、何らかの条件に基づいてDOM要素のスタイルを変更するために使用される属性ディレクティブです。

I am an Attribute Directive

上記のコードスニペットでは、isBlue変数の値がtrueの場合、青い背景を追加しています。isBlue変数の値がfalseの場合、上記の要素の背景は赤になります。

NgIfディレクティブは、ある条件に従ってDOMに要素を追加するために使用される構造ディレクティブです。

I am a Structural Directive

上記のコードスニペットでは、show変数の値がtrueの場合、段落全体がDOMに残ります。それ以外の場合は、DOMから開始されます。

カスタム属性ディレクティブの作成

カスタムディレクティブの作成は、Angularコンポーネントの作成と同じです。カスタムディレクティブを作成するには、@Componentデコレータを@Directiveデコレータに置き換える必要があります。

それでは、最初のカスタム属性ディレクティブの作成を始めましょう。このディレクティブでは、要素の背景色を設定して、選択したDOM要素を強調表示します。

フォルダにapp-highlight.directive.tsファイルを作成し、src/app以下のコードスニペットを追加します。

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

ここでは、AngularコアからインポートDirectiveElementRefています。Directive機能を提供@Directive私たちはそのプロパティセレクタを提供するデコレータappHighLight我々はアプリケーションでこのセレクタのどこでも使用できるようにします。またElementRef、DOM要素へのアクセスを担当するをインポートしています。

今得るためにappHighlight仕事に指令を、我々は中に宣言アレイに私たちのディレクティブを追加する必要がありますapp.module.tsファイル。

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

次に、新しく作成したカスタムディレクティブを使用します。にappHightlightディレクティブを追加してapp.component.htmlいますが、アプリケーションのどこでも使用できます。

Highlight Me !

上記のコードスニペットの出力は次のようになります。

カスタム構造ディレクティブの作成

前のセクションでは、最初のAttributeディレクティブを作成しました。同じアプローチを使用して、構造ディレクティブも作成します。

それでは、構造ディレクティブの作成を始めましょう。このディレクティブでは、の*appNot正反対で機能するディレクティブを実装し*ngIfます。

次にapp-not.directive.tssrc/appフォルダーにファイルを作成し、以下のコードを追加します。

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

上記のコードスニペットで見たように、私たちはDirective, Input, TemplateRef and ViewContainerRefからインポートしています@angular/core.

Directive@Directiveデコレータに同じ機能を提供します。Inputデコレータは、二つの構成要素間の通信に使用されます。プロパティバインディングを使用して、あるコンポーネントから別のコンポーネントにデータを送信します。

TemplateRef埋め込みビューをインスタンス化するために使用される埋め込みテンプレートを表します。これらの埋め込みビューは、レンダリングされるテンプレートにリンクされています。

ViewContainerRef1つ以上のビューをアタッチできるコンテナです。createEmbeddedView()関数を使用して、コンテナに埋め込まれたテンプレートを添付できます。

今得るためにappNot仕事にディレクティブを、我々は中に宣言アレイに私たちのディレクティブを追加する必要がありますapp.module.tsファイル。

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

次に、新しく作成した構造ディレクティブを使用します。

appNotディレクティブを追加してapp.component.htmlいますが、アプリケーションのどこでも使用できます。

True

False

*appNotディレクティブがあれば、それはDOMにテンプレート要素を追加しますように設計され*appNotた値があるfalseちょうど反対側に*ngIf指示。

上記のコードスニペットの出力は次のようになります。

この記事がAngularディレクティブに関するほとんどの質問に答えてくれることを願っています。ご不明な点やご不明な点がございましたら、コメントボックスからお気軽にお問い合わせください。