Angularにおける@HostBinding()と@HostListener()とは何ですか?

Angularにおける@HostBinding()と@HostListener()とは何ですか?

@HostListener と @HostBinding を理解するには、Angularのディレクティブに関する基本的な知識が必要です。Angularには3種類のディレクティブがあります。

読書時間5分

@HostListener と @HostBinding を理解するには、Angularのディレクティブに関する基本的な知識が必要です。Angularには3種類のディレクティブがあります。

  1. コンポーネント
  2. Attribute Directive
  3. 構造指令

コンポーネントとディレクティブの基本的な違いは、コンポーネントにはテンプレートがあるのに対し、属性や構造的指示にはテンプレートがない点です。これら二つの概念を理解するために、まずはシンプルなカスタム属性指令を作成しましょう。以下の指示はホスト要素の背景色を変えます:

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

カスタム属性ディレクティブを作成するには、クラスを作成し、それを@Directiveで装飾する必要があります。指令クラスのコンストラクタで、オブジェクトElementRefとRendererを注入します。ホスト要素とレンダラーの参照を得るためには、これら2つのクラスのインスタンスが必要です。

上記の属性指示は、以下のリストに示されているようにコンポーネントテンプレートに適用できます:

<div appChbgcolor>
    <h3>{{title}}</h3>
</div>

ここでは、ホスト要素を保持するコンポーネントクラスが次のように作成されます。

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Hey ng Developer ! ';
}

現時点では、appChbgcolor指令がホスト要素の色を変えます。

@HostListener() decorator

Angularでは、@HostListener()関数デコレーターにより、指令クラス内のホスト要素のイベントを扱うことが可能です。

次の要件を考えてみましょう:ホスト要素にマウスを合わせると、ホスト要素の色だけが変わるはずです。さらに、マウスがいなくなるとホスト要素の色がデフォルトの色に変わるはずです。これを行うには、指示クラスのホスト要素で発生したイベントを処理する必要があります。Angularでは、@HostListener()を使ってこれを行います。

よりわかりやすくするために@HostListener()という別の単純なシナリオを考えてみましょう。ホスト要素をクリックしたときにアラートウィンドウを表示したい場合です。指示クラスでこれを行うには、@HostListener()を追加し、イベント「クリック」を渡します。また、以下のリストに示されているようにアラートを発生させる関数を関連付けてください:

@HostListener('click') onClick() {
    window.alert('Host Element Clicked');
}

Angularでは、@HostListener()関数デコレータを使えば、指示クラス内でホスト要素で発生したイベントの処理が非常に簡単にできます。マウスがホバリングしている時だけ色を赤に変え、マウスが離れたらホスト要素の色が黒に変わるという要件に戻りましょう。これを行うには、ディレクトリクラス内のホスト要素のmouseenterとmouseexitイベントを処理する必要があります。これを実現するために、appChbgcolorの指示クラスを以下のように修正してください:

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
 
@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {
 
    constructor(private el: ElementRef, private renderer: Renderer) {
        // this.ChangeBgColor('red');
    }
 
    @HostListener('mouseover') onMouseOver() {
        this.ChangeBgColor('red');
    }
 
    @HostListener('click') onClick() {
        window.alert('Host Element Clicked');
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.ChangeBgColor('black');
    }
 
    ChangeBgColor(color: string) {
 
        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

指示クラスでは、マウスエンターとマウスエクジットのイベントを処理しています。ご覧の通り、@HostListener()を使ってこれらのホスト要素イベントを処理し、関数を割り当てています。

では、@HostListener() function decoratorを使って、指示クラスのホスト要素のイベントを処理してみましょう。

@HostBinding() decorator

Angularでは、@HostBinding()関数デコレーターを使って、指示クラスからホスト要素のプロパティを設定できます。

例えば、高さ、幅、色、マージン、ボーダーなどのスタイルプロパティを変更したいとします。 または指令クラス内のホスト要素の他の内部特性。ここでは、@HostBinding()デコレーター関数を使ってホスト要素のこれらのプロパティにアクセスし、指示クラスで値を割り当てる必要があります。

@HostBinding()デコレータは、ホスト要素のプロパティ名というパラメータを1つ取り、その値を指示文で割り当てたいものです。

例では、ホスト要素はHTMLのdiv要素です。ホスト要素の境界プロパティを設定したい場合は、以下の通り@HostBinding()デコレーターを使って設定できます:

@HostBinding('style.border') border: string;
 
@HostListener('mouseover') onMouseOver() {
    this.border = '5px solid green';
}

このコードを使うと、マウスホバー時にホスト要素の境界線が緑色の実線の5ピクセル幅に設定されます。 したがって、デコレーター@HostBinding使えば、ホスト要素のプロパティを指示クラスで設定できます。

この投稿が好きですか?

以上がすべてです!もしこの投稿が気に入ったら、ぜひシェアしてください。さらに、Infragistics Ignite UI for Angular Componentsをまだご覧になっていなければ、ぜひチェックしてください!30+のマテリアルベースのAngularコンポーネントがあり、高速なウェブアプリをより速くコーディングできます。

Angular
デモを予約