AngularJS での @HostBinding() と @HostListener() の使用の違い

今回は、AngularJSにおける@HostBinding()と@HostListener()の使用の違いと、AngularJSで@HostBinding()と@HostListener()を使用する際の注意事項について説明します。以下に実際のケースを見てみましょう。

@HostBinding() と @HostListener() は、命令をカスタマイズするときに非常に便利です。 @HostBinding() はクラス、スタイル、属性などをディレクティブのホスト要素に追加でき、@HostListener() はホスト要素のイベントをリッスンできます。

@HostBinding() と @HostListener() はカスタム命令で使用されるだけでなく、カスタム命令でもより多く使用されます

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

次に、入力中にフォントと境界線の色をリアルタイムで変更するコマンドを実装することで、@HostBinding() と @HostListener() の使用法を学習します。

りー

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

①: ディレクティブに appRainbow という名前を付けます
②: 表示する必要があるすべての可能な色を定義します
③: スタイルを設定するために @HostBinding() を使用して color と borderColor を定義および装飾します
④: @HostListener() を使用してホストの keydown イベントをリッスンします要素の色は color と borderColor にランダムに割り当てられます

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

推奨読書:

springmvcは、axiosがリクエストを送信するときにパラメータを受け入れることができません

axiosを介してネットワークリクエスト機能を実装する方法

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