AngularJS の @HostBinding() と @HostListener() の違いは何ですか

今回は AngularJS の @HostBinding() と @HostListener() の違いは何ですか? AngularJS で @HostBinding() と @HostListener() を使用する場合の 注意事項 は何ですか?実際のケース、その 1 つ 立ち上がって見てください。 @HostBinding() と @HostListener() は、命令をカスタマイズするときに非常に便利です。 @HostBinding() はクラス、スタイル、

属性

などをディレクティブのホスト要素に追加でき、@HostListener() はホスト要素のイベントをリッスンできます。 @HostBinding() と @HostListener() はカスタム命令で使用されるだけでなく、カスタム命令でさらに使用されます

この記事は Angular2+ に基づいています

以下では、フォントとボーダーのリアルタイム変更を実装します色の説明については、@HostBinding() と @HostListener() の使用法を学習してください。

import { Directive, HostBinding, HostListener } from '@angular/core';
@Directive({
 selector: '[appRainbow]'①
})
export class RainbowDirective{
 possibleColors = [
  'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
  'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
 ];②
 @HostBinding('style.color') color: string;
 @HostBinding('style.borderColor') borderColor: string;③
 @HostListener('keydown') onKeydown(){④
  const colorPick = Math.floor(Math.random() * this.possibleColors.length);
  this.color = this.borderColor = this.possibleColors[colorPick];
 }
}

上記のコードの主要な部分について話しましょう:

①: ディレクティブに appRainbow という名前を付けます

②: 表示する必要があるすべての可能な色を定義します

③: @HostBinding() で色と borderColor を定義して装飾します。スタイルを設定するには
④: @HostListener() を使用してホスト要素の keydown イベントをリッスンし、color と borderColor に色をランダムに割り当てます

OK、次は手順に従ってください:

効果は次のとおりです。このように:

注: モジュールに命令を導入することを忘れないでください

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！

推奨読書:

vue2 で axios http リクエストが使用できない理由

post リクエストの送信時に springMVC がパラメータを受信できない理由

以上がAngularJS の @HostBinding() と @HostListener() の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。