Angular Event binding/attribute bindings @HostListener、@HostBinding

クズども · 掲載地 2019/06/26 14:42:08

HostListenerやHostBindingのプロパティデコレーターに入る前に、まずホスト要素を見てみましょう。

ホスト要素の概念は命令とコンポーネントの両方に適用されます。指示書の概念は比較的シンプルです。命令を適用する要素がホスト要素です。例えば、HighlightDirective指令(セレクター:'[exeHighlight]')を宣言したとします:

ログインが見えます。

上記のHTMLコードでは、p要素がホスト要素です。もし指令がカスタムコンポーネントに適用される場合、例えば:

ログインが見えます。

この場合、exe-counterのカスタム要素がホスト要素となります。

HostListenerはホスト要素にイベントリスニングを追加するプロパティデコレーターです。

AngularではHostBindingデコレーターを使って要素のプロパティバインディングを実装できます。

この指示はHostListenerデコレーターを使ってユーザーのクリックイベントを聴く方法を示しています

ログインが見えます。

さらに、ホスト要素以外のオブジェクト(ウィンドウやドキュメント、ボディなど)によって生成されたイベントも受信可能です
対象はウィンドウ、ドキュメント、または本文のいずれかです

ログインが見えます。

@HostBinding()と@HostListener()は指示のカスタマイズに役立ちます。 @HostBinding()はコマンドのホスト要素にクラス、スタイル、属性などを追加でき、@HostListener()はホスト要素のイベントを聞くことができます。

例:フォントと枠の色を実装し、入力中にリアルタイムでフォントと境界線の色を変えます

ログインが見えます。

上記のコードの主要な部分について話しましょう。
(1): 私たちのコマンドをAppRainbowに名付けてください
(2):表示すべきすべての色を定義する
(3): スタイリング用の色とborderColorを@HostBinding()で定義・装飾する
(4):@HostListener()を使ってホスト要素のキーダウンイベントを聞き、色とborderColorにランダムに色を割り当てます

ページ上のコマンドを使ってください:

ログインが見えます。

その効果は以下の通りです:

[角] Angular Event binding/attribute bindings @HostListener、@HostBinding

関連記事

閲覧したセクション