@HostBindingと@HostListenerは何をしますか？

Question

Accepted Answer

これらのデコレータにより、ディレクティブまたはコンポーネントは**ホスト要素**（ディレクティブが配置される要素、またはコンポーネント自身のルート要素）を操作し、それに応答できます。`@HostBinding`はホストにプロパティ/属性を設定し、`@HostListener`はそれのイベントをリッスンします。 ## @HostBinding — ホストプロパティ/属性にバインド ```ts import { Directive, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("class.active") isActive = false; // toggle a CSS class on the host @HostBinding("style.color") color = "black"; // bind an inline style @HostBinding("attr.role") role = "button"; // set an attribute } ``` `@HostBinding`は、ホスト要素のクラス/スタイル/属性/プロパティをコンポーネントフィールドにリアクティブにバインドします。フィールドを変更するとホストが更新されます。 ## @HostListener — ホストイベントに応答 ```ts import { Directive, HostListener, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("style.background") bg = ""; @HostListener("mouseenter") onEnter() { this.bg = "yellow"; // changing the field updates the host via HostBinding } @HostListener("mouseleave") onLeave() { this.bg = ""; } @HostListener("click", ["$event"]) onClick(event: MouseEvent) { console.log("host clicked", event); } } ``` `@HostListener`はホスト上のDOMイベントをサブスクライブします（`$event`および他の引数を受け取ることができます）。これらを組み合わせることで、ディレクティブは完全に自己完結型になります：ホストのイベントをリッスンし、ホストの外観をリアクティブに更新します。 ## 完全な例：ホバー強調表示 ```text

Hover me

→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the

's background → mouseleave fires onLeave() → clears it ``` ## ホストメタデータの別の方法 ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## なぜ重要なのか `@HostBinding`と`@HostListener`は、**ディレクティブ**がホスト要素と相互作用するための標準的なツールです。クラス/スタイル/属性を追加し、イベントに宣言的に応答します。`ElementRef.nativeElement`を手動で取得してリッスナーを配線する必要がありません。再利用可能な動作ディレクティブ（強調表示、ツールチップ、ドラッグ可能、アクセシブルウィジェット）をクリーンに構築するために不可欠です。また、手動のDOMコードが管理しなければならない変更検出とリッスナークリーンアップを自動的に処理します。