Angularでカスタム属性ディレクティブを作成する方法

Angularでカスタム属性ディレクティブを作成する方法

この投稿では、Angularで属性ディレクティブを作成する方法を学習します。したがって、要素の背景色を変更したいとしましょう。その場合は、属性ディレクティブを要素に適用します。

6min read

この投稿では、Angularで属性ディレクティブを作成する方法を学習します。したがって、要素の背景色を変更したいとしましょう。その場合は、属性ディレクティブを要素に適用します。

属性ディレクティブは、ユーザー入力またはサービスからのデータを介して要素の動作、外観、または外観を変更するために使用されます。基本的に、Angular 2には3種類のディレクティブがあります。

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

最初の属性ディレクティブの作成

まずは属性ディレクティブの作成から始めましょう。これを行うには、クラスを作成し、デコレーターで@directive装飾する必要があります。要素の色を変更するための単純な属性ディレクティブは、次のリストに示すように作成できます。

import { Directive, ElementRef, Renderer } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
 
    constructor(private el: ElementRef, private render: Renderer) {
        this.changecolor('red');
    }
 
    private changecolor(color: string) {
 
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

要素の色を変更するための属性ディレクティブを作成するときは、色を変更するだけで新しい属性ディレクティブを作成する必要はないことに注意してください。単純な色は、プロパティ バインディングを使用して変更できます。ただし、作成した属性ディレクティブは、この例では要素の色を変更します。覚えておくべき重要な点がいくつかあります。

  1. Directive、ElementRef、Renderer などの必要なモジュールをコア ライブラリからインポートAngular
  2. Create a TypeScript class
  3. クラスを@directiveで飾る
  4. デコレータ関数のselectorプロパティの値を設定します@directive。ディレクティブは、要素のセレクター値を使用して使用されます。
  5. クラスのコンストラクタで、ElementRefとRendererオブジェクトを挿入します。

DOM要素にアクセスするために、ディレクティブのコンストラクターにElementRefを挿入しています。また、DOM の要素スタイルを操作するために、ディレクティブのコンストラクターに Renderer を挿入しています。 レンダラーの setElementStyle 関数を呼び出しています。この関数では、ElementRefのオブジェクトを使用し、現在の要素のcolor styleプロパティを設定することで、現在のDOM要素を渡します。この属性ディレクティブは、次のリストに示すように、AppComponentのセレクターで使用できます。

@Component(
    {
        selector: 'app-container',
        template: `<p chcolor>{{message}}</p>`
    })
export class AppComponent {

属性ディレクティブを

要素。段落テキストの色が赤に変わります。 また、次のリストに示すように、app.module.tsで属性ディレクティブを宣言する必要があります。

  1. ディレクティブをインポートする必要があります
  2. ディレクティブを宣言する必要があります

app.module.ts

import { ChangeColorDirective } from './task/taskcolor.directive';
 
import { app_routing } from './app.routing';
import { DataService } from './shared/data.service';
 
@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, app_routing],
    declarations: [AppComponent, TasksComponent, HomeComponent, AddtaskComponent, ChangeColorDirective],
    providers: [DataService],
    bootstrap: [AppComponent]
})
export class AppModule { }

ここでは、ChageColorDirectiveをインポートし、app.moduleで宣言しています。これを行うと、すべてのコンポーネントで属性ディレクティブを使用できるようになります。

属性ディレクティブのユーザー入力

ユーザーが要素にマウスを合わせたり、要素にマウスを合わせたりしたときに要素の色を変更するために、一部のユーザー入力に基づいて属性ディレクティブを適用する必要がある場合があります。これを行うには、次のことを行う必要があります。

  1. ユーザー入力またはアクションをキャプチャし、
  2. それぞれ色またはクリア色を適用します。

さまざまなユーザーアクションで、さまざまなメソッドを呼び出してユーザーアクションを処理できます。メソッドがマウス入力などのユーザーアクションを処理できるようにするには、@HostListenerデコレータでメソッドを装飾する必要があります。 次のリストに示すように、ユーザー入力を処理するようにディレクティブを変更できます。

import { Directive, ElementRef, Renderer, HostListener, Input } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
    constructor(private el: ElementRef, private render: Renderer) { }
 
    @HostListener('mouseenter') methodToHandleMouseEnterAction() {
        this.changecolor('red');
    }
    @HostListener('mouseleave') methodToHandleMouseExitAction() {
        this.changecolor('blue');
    }
    private changecolor(color: string) {
 
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

お分かりのように、ユーザーアクションを処理するための2つのメソッドを追加しました。マウスの進入時とマウスの離脱時に、色をそれぞれ赤と青に変更しています。

バインディングを使用したディレクティブへのデータの受け渡し

ここまで、色の値をディレクティブにハードコーディングしました。次のセクションでは、バインディングを使用してディレクティブにデータを渡しましょう。ディレクティブをデータにバインドするには、@Input()デコレータを使用し、ディレクティブクラスにプロパティを追加します。

@Input('chcolor') highlightColor: string;

属性ディレクティブは次のように使用できます。

<p [chcolor]="color">{{message}}</p>

バインディングからデータを取得するために属性ディレクティブを書き換えてみましょう。属性ディレクティブがバインドされる要素は、カラーデータを渡します。 要素がカラーデータを属性バインディングにバインドしていない場合は、デフォルトの色である赤が使用されます。

このディレクティブは、次のリストに示すように再作成できます。

import { Directive, ElementRef, Renderer, HostListener, Input } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
    private _defaulColor = 'red';
    @Input('chcolor') highlightColor: string;
 
    constructor(private el: ElementRef, private render: Renderer) { }
 
    @HostListener('mouseenter') methodToHandleMouseEnterAction() {
 
        console.log(this.highlightColor);
        this.changecolor(this.highlightColor || this._defaulColor);
    }
    @HostListener('mouseleave') methodToHandleMouseExitAction() {
        console.log(this.highlightColor);
        this.changecolor(null);
    }
 
    private changecolor(color: string) {
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

次のリストに示すように、属性ディレクティブへのバインディングを介してデータを渡すことができます。

  @Component({
 selector: 'app-container',
 template: `
 <div>
     <input type="radio" name="colors" (click)="color='blue'">blue
     <input type="radio" name="colors" (click)="color='orange'">orange
     <input type="radio" name="colors" (click)="color='green'">green
 </div>
 <p [chcolor]="color">{{message}}</p>`
 })
 export class AppComponent {

ラジオボタンを作成し、ボタンのクリックイベントの色の値を属性ディレクティブにバインドしています。ラジオボタンから色を選択し、マウスを入力すると、色が選択した値に変更されます。

実際のアプリケーションでは、RESTサービスからデータをフェッチし、属性ディレクティブにバインドすることができます。

結論

この投稿では、Angularの属性ディレクティブについて学び、要素の動作や外観を変更するために属性ディレクティブを作成し、それを要素のデータにバインドしました。この投稿がお役に立てば幸いです。読んでくれてありがとう!

Angular How To
デモを予約