0Pricing
Angular Academy · レッスン

hostDirectivesプロパティ

コンポーネントホストにディレクティブを付加します

「hostDirectivesプロパティ」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

ディレクティブ合成API

ディレクティブ合成APIを使うと、コンポーネントやディレクティブがhostDirectivesプロパティを通じて、他のディレクティブを自身のホスト要素に宣言的に適用できます。これにより、継承を使わずに再利用できます。

解決する問題

以前は、ディレクティブの動作を再利用するには、すべてのテンプレートでディレクティブを繰り返し記述するか、継承を使う必要がありました。hostDirectivesを使うと、動作をホストに直接合成できます。

基本構文

コンポーネントのメタデータにあるhostDirectives配列にディレクティブを列挙します。

@Component({
  selector: 'app-menu',
  hostDirectives: [CdkTrapFocus],
  template: '<ng-content></ng-content>'
})
export class MenuComponent {}

起こること

Angularはすべてのapp-menuホスト要素にCdkTrapFocusを自動的に適用します。利用側は自分でディレクティブを追加しなくても、その動作を利用できます。

要件

ホストディレクティブはstandaloneである必要があります。セレクターではなく、ディレクティブクラスを直接参照します。

複数のホストディレクティブ

複数の動作をすべて列挙して合成できます。

hostDirectives: [
  HighlightDirective,
  TooltipDirective,
  CdkTrapFocus
]

ディレクティブへの適用

ディレクティブにもホストディレクティブを指定できるため、階層化された再利用可能な動作を構築できます。

@Directive({
  selector: '[appCard]',
  hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}

ライフサイクルの順序

ホストディレクティブは、ホスト自身のコンストラクター処理より前にインスタンス化されます。そのため、ホストの初期化時にはホストディレクティブのセットアップが利用可能です。

依存性の注入

ホストディレクティブは要素インジェクターを介してホストに注入でき、その逆も可能です。これにより、合成された動作同士を連携させられます。

private trap = inject(CdkTrapFocus);

テンプレートの変更不要

最大のメリットは、app-menuの利用側がCdkTrapFocusについて知る必要がないことです。動作はコンポーネント定義内にカプセル化されています。

使用する場面

フォーカストラップ、リップル、アナリティクスなどの横断的な動作を、コンポーネントやディレクティブに整理された再利用可能な形でまとめるには、hostDirectivesを使用してください。

クイックチェック

hostDirectivesについての理解度を確認します。

まとめ

hostDirectivesプロパティを使うと、standaloneディレクティブをコンポーネントやディレクティブのホスト要素に自動適用でき、テンプレートや継承を使わずに合成によって動作を再利用できることを学びました。

よくある質問

「hostDirectivesプロパティ」レッスンは無料ですか？

はい。「hostDirectivesプロパティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「hostDirectivesプロパティ」で何を学びますか？

コンポーネントホストにディレクティブを付加します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「hostDirectivesプロパティ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. hostDirectivesプロパティ
  2. InputsとOutputsの公開
  3. 再利用可能な振る舞いの構築
  4. コンポジションと継承
← Angular Academyに戻る