Angularでのカスタムディレクティブの構築

提供:Dev Guides
移動先:案内検索

Angular 2+でディレクティブを構築することは、コンポーネントを構築することと大差ありません。 結局のところ、コンポーネントはビューがアタッチされた単なるディレクティブです。 実際、Angularには、コンポーネント、属性ディレクティブ、構造ディレクティブの3種類のディレクティブがあります。

構造ディレクティブは、DOMに要素を追加または削除します。 NgIfngFor 、および ngSwitch は、組み込みの構造ディレクティブの例です。 属性ディレクティブは、要素のスタイルまたは動作を変更するために使用されます。

appShadow ディレクティブの例を使用して、カスタム属性ディレクティブを作成する方法を学びましょう。

ディレクティブクラスの定義

Directive ElementRef Renderer2@angle / core からインポートし、レンダラーを使用して要素のスタイルを目的のに設定します] box-shadow 値:

ディレクティブ:shadow.directive.ts

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

セレクターが角かっこで囲まれていることに注意してください: [appShadow] 、適切に属性ディレクティブにします。

アプリモジュールで宣言する

approotモジュールで新しいディレクティブを宣言する方法は次のとおりです。

アプリモジュール:app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { ShadowDirective } from './shadow.directive';

テンプレートでディレクティブを使用する

これで、次のようにテンプレートで属性ディレクティブを使用するのと同じくらい簡単になります。

アプリモジュール:app.component.html

<span appShadow>Alligator</span>

指令の改善

appShadow ディレクティブは少し馬鹿げているので、代わりにスタイルのバインディングを使用してシャドウを適用することもできます。 したがって、ディレクティブに値を渡すことができるようにして、より良いものにしましょう。

ディレクティブ:shadow.directive.ts

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

@Directive({ selector: '[appShadow]' })
export class ShadowDirective implements OnInit {
@Input() appShadow: string;
@Input() appShadowX: string;
@Input() appShadowY: string;
@Input() appShadowBlur: string;

constructor(private elem: ElementRef, private renderer: Renderer2) { }

ngOnInit() {
  let shadowStr = `${ this.appShadowX } ${ this.appShadowY } ${ this.appShadowBlur } ${ this.appShadow }`;
  this.renderer.setStyle(this.elem.nativeElement, 'box-shadow', shadowStr);
}

inputs を使用して、コンポーネントテンプレートからディレクティブにデータを渡しました。 コンストラクターで作業を行う代わりに、OnInitライフサイクルフックを使用していることにも注目してください。 これは、構築時に入力に値がないためです。

これで、シャドウを完全に制御できます。

アプリモジュール:app.component.html

<span [appShadow]="'hotpink'"
      [appShadowX]="'12px'"
      [appShadowY]="'6px'"
      [appShadowBlur]="'30px'">Alligator</span>

👉カスタムディレクティブのスコープをアプリケーションに限定することがベストプラクティスであるため、シャドウではなく、ディレクティブappShadowと呼びました。