Angularの構造ディレクティブ

おそらく、構造ディレクティブのAngularビルドに精通しているでしょう：ngFor、NgIf、NgSwitch。しかし、それらはどのように機能し、どのようなプロパティがあり、舞台裏で何が起こっているのでしょうか？

この記事では、構造ディレクティブについての小さなガイドを作成し、テンプレートで何が起こっているかを示してから、ディレクティブを使用し、構造ディレクティブでデコレータプロパティexportAsを使用する場合を示します。

Angularのディレクティブのショートガイド

Angularディレクティブは、DOM要素の外観または動作を変更するために使用されます。ディレクティブには次の3つのタイプがあります。

1. コンポーネント（独自のテンプレートを使用）。
2. 構造、DOMツリーの構造を変更します。
3. DOM要素の外観またはデフォルトの動作を変更する属性。

独自の構造ディレクティブの作成

たとえば、ページに要素を追加する独自の単純な構造化ディレクティブaddElementを作成しましょう。

ディレクティブの作成は、@ Directive属性を使用したクラスのように見えます。この属性には、任意の要素に追加されたときにディレクティブがどのように表示されるかを説明するセレクターがあります。

ディレクティブをいくつかの要素に追加しましょう。非常に簡単です。コンポーネントモジュールの宣言オブジェクトに新しいディレクティブを追加し、テンプレートの要素にディレクティブをハングアップします。

ディレクティブのクラス自体に戻ります。これは構造ディレクティブであるため、次のサービスをコンストラクターに挿入できます。

TemplateRefは、特別な<ng-template />タグでラップされたビューです。私たちにとって、これは私たちがディレクティブを掛けた<div>です。<ng-template />がこれにどのように関連するかについては後で説明します。

ViewContainerRefは、ディレクティブのラッパーです。

そして今、ブラウザでappAddElementディレクティブを使用して要素を検査することにした場合。構造化されたディレクティブを作成し、すぐに要素をDOMからスローするため、何も表示されません。

これを修正するには、OnInitメソッドのコンテナを介してテンプレートを追加しましょう。

そして今、私たちはブラウザのコンテンツで私たちのdivを見ることができました。しかし、今のところそれほど面白くはありません。ディレクティブで実行できるいくつかの機能について考えてみましょう。

ディレクティブへの入力

コンポーネントで行うのと同じように、入力パラメータをディレクティブに渡すことができます。さらに、簡単にするために、ディレクティブの名前を入力として指定できます。ディレクティブにロジックを追加し、タイムアウトごとに要素を表示し、入力パラメーターを介してタイムアウト時間を渡します。

次に、ディレクティブを呼び出すときに、遅延秒を入力パラメーターとして渡します。

そして、ブラウザで予想されるように、divが3秒で表示されることがわかります。

Angularの内部で構造ディレクティブがどのように機能するかを簡単に確認する

Angularの場合は、次のコードを参照してください。

すべてを<ng-template>タグでラップします

そして、<ng-template>自体に、Angularは次の名前で単純なディレクティブ属性を配置します。

上記のこの表記は、*を使用した構造ディレクティブの通常の表記とまったく同じです。

しかし、これで、コンストラクターコードの行で以前に宣言されたものが正確に何をするかを確認できます。

プライベートテンプレート：TemplateRef <any>

これは、前に書いたng-templateタグのコンテンツです。

また、コンストラクターで宣言されたViewContainerRefは、ディレクティブのラッパーとしての<ng-template>タグ自体です。

そして今、構造ディレクティブで*を使用することは単なる構文糖衣であり、ディレクティブ表記を短くするのに役立つことは明らかだと思います。

ExportAsデコレータプロパティとそれを構造ディレクティブで使用する

最後に、非常に便利なプロパティexportAsを指摘します。これにより、ディレクティブがアタッチされている要素の外部でディレクティブのクラスを使用できます。この場合、このディレクティブが使用されるコンポーネントテンプレートでディレクティブのメソッドを直接呼び出すことができます。

exportAsプロパティは属性ディレクティブによく使用されることに注意してください。ただし、ここでは、構造ディレクティブの例を使用してその操作を見ていきます。

ただし、いくつかの制限があります。構造ディレクティブを使用してexportAsプロパティを操作できるようにするには、構造ディレクティブを非糖化形式で使用する必要があります — *記号なし

次に、ディレクティブのロジックを少し変更しましょう。コンテンツを表示するためのロジックをngOnInitから別のメソッドに移動しましょう。また、exportAsプロパティを@Directiveデコレータに追加します。つまり、この場合は「addElement」という名前のディレクティブクラスをエクスポートします。

ここで、前述したように、exportAsを使用できるようにするために、ディレクティブの呼び出しに移りましょう。*記号なしで、非糖化形式でディレクティブを適用する必要があります。そして今、ボタンをクリックすることで、ディレクティブクラスからswitchElement（）メソッドを直接呼び出し、divコンテンツの表示を切り替えます。

読んでくれてありがとう！この記事がお役に立てば幸いです。Angularで構造ディレクティブがどのように機能するのかという謎が解き明かされました。次の投稿でお会いしましょう！