今回は 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 サイトの他の関連記事を参照してください。