Angular Directivesを使用および作成するための実用的なガイド-SitePoint-jsチュートリアル-php.cn

Angular Directivesを使用および作成するための実用的なガイド-SitePoint

この記事では、角度指令に焦点を当てています。それらは何ですか、それらの使用方法、そして私たち自身のものを構築します。

ディレクティブはおそらく角度アプリケーションの最も重要なビットであり、それについて考えると、最もよく使用されている角度単位であるコンポーネントが実際に指示です。

角度コンポーネントは、テンプレートを備えた指令にすぎません。コンポーネントが角度アプリケーションの構成要素であると言うとき、実際に指令は角度アプリケーションの構成要素であると言っています。

キーテイクアウト

Angularディレクティブは、Angularアプリケーションの重要な部分であり、HTMLのパワーを新しい構文で拡張します。それらは、AngularコンパイラがDOMでそれらを見つけるたびに実行する関数であり、要素、属性、クラス、またはコメントで使用できます。

Angularディレクティブは、コンポーネント、属性指令、および構造指令の3つのタイプに分けられます。コンポーネントは、テンプレートを備えたディレクティブであり、属性ディレクティブの動作と外観を変更することによりDOMを操作し、構造指令を使用してDOM要素を作成および破壊するために使用されます。

手元のタスクの適切なタイプの指令を選択することが重要です。 DOMが表示されない場合でも要素が役立つ場合は、属性指令を使用する必要があります。要素に使用がない場合は、構造指令を使用して削除する必要があります。ただし、DOMが過度に複雑になったり、パフォーマンスに悪影響を与えることを避けるために注意する必要があります。
基本的な概要
コアでは、ディレクティブは、AngularコンパイラがDOMでそれを見つけるたびに実行する関数です。 Angularディレクティブは、新しい構文を提供することにより、HTMLのパワーを拡張するために使用されます。各ディレクティブには、Ng-Repeatのように事前に定義された角度のあるもののいずれか、またはあらゆるものと呼ばれるカスタムのいずれかの名前があります。そして、各ディレクティブは、それを使用できる場所を決定します：要素、属性、クラス、またはコメントで。
コンポーネント

以前に見たように、コンポーネントはテンプレートを備えた指示にすぎません。ボンネットの下で、彼らはディレクティブAPIを使用し、それらを定義するためのクリーンな方法を提供します。

他の2つのディレクティブタイプにはテンプレートがありません。代わりに、それらは特にDOM操作に合わせて調整されています

属性ディレクティブ

属性ディレクティブの動作と外観を変更することにより、DOMを操作します。

属性ディレクティブを使用して、要素に条件付きスタイルを適用したり、要素を表示または非表示にしたり、変化するプロパティに従ってコンポーネントの動作を動的に変更したりします。

構造指令

これらは、DOM要素を作成および破壊するように特別に調整されています。

要素を表示または隠すHiddenのように、基本的にDOMをそのまま維持します。しかし、構造的な角度指令は、DOMから要素を追加または完全に削除するため、DOMフレンドリーがはるかに少なくなります。したがって、これらを使用する場合、HTML構造を実際に変更しているため、特に注意する必要があります。

既存のAngularディレクティブを使用

Angularで既存のディレクティブを使用するのは非常に簡単です。過去にAngularアプリケーションを作成したことがある場合は、使用したことはかなり確信しています。 NGCLASS指令は、既存のAngular属性指令の良い例です。

したがって、以下の例でNGCLASSディレクティブを使用することにより、実際に段落に青色のクラスを追加し、明示的に黄色のクラスを追加しません。クラスの外観を変更し、実際のHTML構造を変更していないため、これは明らかに属性指令です。しかし、Angularは、NGIFのようなすぐに使える構造指令も提供しています。

この例では、NGIF指令を使用して、ボタンを使用してテキストを追加または削除します。この場合、HTML構造自体が影響を受けているため、明らかに構造的指令です。

利用可能なAngularディレクティブの完全なリストについては、公式ドキュメントを確認できます。

見たように、Angularディレクティブを使用することは非常に簡単です。 Angularディレクティブの本当の力には、独自の独自の能力が伴います。 Angularは、カスタムディレクティブを作成するためのクリーンでシンプルなAPIを提供します。これは、次のセクションで検討するものです。

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

ログイン後にコピー

属性指令の作成

指令を作成することは、コンポーネントの作成に似ています。ただし、この場合、@directive Decoratorを使用します。この例では、「My-Error-Directive」という指令を作成します。これは、エラーを示す要素の背景を赤で強調します。この例では、Angular 2 QuickStartパッケージを使用します。リポジトリをクローンしてから、NPMインストールを実行してNPMを開始する必要があります。実験に使用できるボイラープレートアプリを提供します。そのボイラープレートの上に例を掲載します。

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

ログイン後にコピー

@angular/coreからディレクティブをインポートした後、それを使用できます。まず、ディレクティブに名前を付けるセレクターが必要です。この場合、それをmy-errorと呼びます。

ベストプラクティスは、Angularディレクティブに名前を付けるときは常にプレフィックスを使用することを決定します。これにより、標準のHTML属性との競合を確実に回避することができます。また、NGプレフィックスを使用しないでください。 Angularが使用するものであり、カスタム作成されたAngularディレクティブをAngularの事前定義されたディレクティブと混同したくありません。この例では、私たちのプレフィックスは私の - 。

です

次に、クラス、myerrordirectiveを作成しました。 DOMの任意の要素にアクセスするには、ElementRefを使用する必要があります。また、 @Angular/Coreパッケージに属しているため、指令とともにインポートして使用するという簡単な問題です。

次に、クラスのコンストラクターを実際に強調するためにコードを追加しました。

この新しく作成されたディレクティブを使用できるようにするには、app.module.tsファイルの宣言に追加する必要があります。

最後に、作成したばかりのディレクティブを利用したいと考えています。それを行うには、app.component.tsファイルに移動して、次のことを追加しましょう。

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

ログイン後にコピー

最終結果はこれに似ています：

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

ログイン後にコピー

構造指令の作成

Angular Directivesを使用および作成するための実用的なガイド-SitePoint 前のセクションでは、Angularを使用して属性ディレクティブを作成する方法を見ました。構造行動を作成するためのアプローチはまったく同じです。指令用のコードを含む新しいファイルを作成し、宣言に追加し、最後にコンポーネントで使用します。

構造指令については、NGIF指令のコピーを実装します。このようにして、指令を実装するだけでなく、Angularディレクティブが舞台裏のものをどのように処理するかを見てみましょう。

app.mycustomifdirective.tsファイルから始めましょう

ご覧のとおり、主に入力、templateref、viewcontainerrefのいくつかの異なるインポートを使用しています。入力デコレータは、データをコンポーネントに渡すために使用されます。 Templaterefのものは、組み込みビューをインスタンス化するために使用されます。埋め込まれたビューは、レンダリングされるレイアウトの一部を表し、テンプレートにリンクされています。最後に、ViewContainerRefは、1つ以上のビューを添付できる容器です。一緒に、これらのコンポーネントは次のように動作します：

ディレクティブViewContainerRefを注入することにより、View Containerにアクセスします。埋め込まれたビューは作成され、ViewContainerRefのCreateEmbedDedViewメソッドを呼び出し、テンプレートを渡すことにより、ビューコンテナに添付されます。指令が添付されているテンプレートを使用したいので、注入されたテンプレートレフを渡します。

- Rangle.ioのAngular 2トレーニングから

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

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

ログイン後にコピー

次に、宣言者に追加します：

そして、コンポーネントで使用します：
<p [ngClass]="{'blue'=true, 'yellow'=false}">
 Angular Directives Are Cool!
</p>

<style>
 .blue{color: blue}
 .yellow{color: yellow}
</style>

ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
構造指示によって提供されるアプローチの種類は、アクセス許可に基づいて異なるユーザーに異なる情報を表示する必要がある場合など、非常に便利です。たとえば、サイト管理者はすべてを表示および編集できる必要がありますが、通常のユーザーはそうすべきではありません。属性指令を使用して個人情報をDOMにロードした場合、通常のユーザーとそのすべてのユーザーがそれにアクセスできるようになります。
Angular Directives：属性vs構造

属性と構造指令を調べました。しかし、いつどちらか一方を使用する必要がありますか？

答えは混乱している可能性があり、問題を解決するという理由だけで、間違ったものを使用することになります。しかし、適切なルールを選択するのに役立つ簡単なルールがあります。基本的に、ディレクティブを持つ要素がDOMが表示されないときに依然としてDOMで役立つ場合は、間違いなく維持する必要があります。この場合、Hiddenのような属性指令を使用します。しかし、要素に役に立たない場合は、削除する必要があります。ただし、いくつかの一般的な落とし穴を避けるために注意する必要があります。それが簡単だからといって、常に隠れている要素の落とし穴を避ける必要があります。これにより、DOMがはるかに複雑になり、おそらく全体的なパフォーマンスに影響を与えます。常に要素を削除および再現するという落とし穴も避けるべきです。それは間違いなくクリーンですが、パフォーマンスを犠牲にして来ます。

全体として、各ケースは慎重に分析する必要があります。これは、理想的なソリューションは常に、アプリケーション構造、動作、パフォーマンスに全体的な影響が最も少ないものであるためです。そのソリューションは、属性指令、構造指令、または最も一般的なシナリオでは、両方の間の妥協のいずれかです。
結論
この記事では、Angularアプリケーションの中核であるAngular Directivesを調べました。私たちはさまざまな種類のディレクティブを見て、私たちのニーズに合ったカスタムを作成する方法を見ました。
この記事がAngularディレクティブであなたを育てて実行できることを願っています。ご質問がある場合は、以下のコメントセクションを自由に使用してください。 Angular Directivesに関するよくある質問（FAQ）

さまざまなタイプのAngularディレクティブは何ですか？Angularでカスタムディレクティブを作成するには、Angularでカスタムディレクティブを作成するには、いくつかのステップが含まれます。まず、Angular Coreからディレクティブデコレータをインポートする必要があります。次に、ディレクティブクラスを定義し、@directive Decoratorで飾る必要があります。デコレータ内のセレクタープロパティは、ディレクティブに使用する名前と一致する必要があります。最後に、ngmoduleの宣言アレイにディレクティブを追加する必要があります。テンプレートで。たとえば、 *ngif指令を使用して条件付き要素をレンダリングするか、 *ngforディレクティブを使用してアイテムのリストをレンダリングできます。これらのディレクティブを使用するには、適切な構文を使用してテンプレートにそれらを追加するだけです。
Angularの指令とコンポーネントの違いは何ですか？Angularのコンポーネントはタイプです。テンプレートを持ち、特定のビューに関連付けられている指令の。一方、指令は、DOMの要素に動作を追加する方法です。コンポーネントはUIウィジェットを作成するために使用されますが、既存の要素に動作を追加するためにディレクティブを使用します。いくつかの方法で。 1つの一般的な方法は、プロパティバインディングを使用することです。ここでは、DOM要素のプロパティをコンポーネントのプロパティにバインドします。イベントバインディングを使用してユーザーアクションに応答したり、モデルとビューを同期させたりするために双方向のバインディングを使用することもできます。 Angularでは、指令を使用するテストコンポーネントの作成を伴い、そのコンポーネントをテストします。テストベッドユーティリティを使用して動的なテストコンポーネントを作成し、コンポーネントフィックスを使用してコンポーネントとその指令と対話できます。 >はい、Angularの単一要素で複数のディレクティブを使用できます。ただし、指令が適用される順序が最終結果に影響を与える可能性があることに注意する必要があります。 Angularは、テンプレートにリストされている順序でディレクティブを適用するため、適用する順序でディレクティブをリストする必要があります。 🎜> @inputデコレータを使用して、パラメーターをAngularの指令に渡すことができます。これにより、指令のプロパティをコンポーネントの値にバインドできます。その後、その動作を制御するために指令内のこの値を使用できます。

Angularの共有ディレクティブを作成するにはどうすればよいですか？共有モジュールで。その後、この共有モジュールを他のモジュールにインポートできます。このモジュールでは、ディレクティブを使用します。これにより、複数のコンポーネントまたはモジュールで同じ指令を再利用できます。
Angularの指令をデバッグするにはどうすればよいですか？