コンポーネントのホスト要素

Tip: このガイドでは、既に基本概念のガイドを読んでいることを前提としています。Angularを初めて使用する場合は、まずこちらをお読みください。

Angularは、コンポーネントのセレクターに一致するすべてのHTML要素に対して、コンポーネントのインスタンスを作成します。コンポーネントのセレクターに一致するDOM要素は、そのコンポーネントのホスト要素です。コンポーネントのテンプレートの内容は、ホスト要素内にレンダリングされます。

      // コンポーネントソース
@Component({
  selector: 'profile-photo',
  template: `
    <img src="profile-photo.jpg" alt="Your profile photo" />
  `,
})
export class ProfilePhoto {}

      <!-- コンポーネントの使用 -->
<h3>Your profile photo</h3>
<profile-photo />
<button>Upload a new profile photo</button>

      <!-- レンダリングされたDOM -->
<h3>Your profile photo</h3>
<profile-photo>
  <img src="profile-photo.jpg" alt="Your profile photo" />
</profile-photo>
<button>Upload a new profile photo</button>

上記の例では、<profile-photo>はProfilePhotoコンポーネントのホスト要素です。

ホスト要素へのバインディング

コンポーネントは、ホスト要素にプロパティ、属性、イベントをバインドできます。これは、コンポーネントのテンプレート内の要素のバインディングと同じように動作しますが、 @Componentデコレーターのhostプロパティで定義されます。

      @Component({
  ...,
  host: {
    'role': 'slider',
    '[attr.aria-valuenow]': 'value',
    '[tabIndex]': 'disabled ? -1 : 0',
    '(keydown)': 'updateValue($event)',
  },
})
export class CustomSlider {
  value: number = 0;
  disabled: boolean = false;
  updateValue(event: KeyboardEvent) { /* ... */ }
  /* ... */
}

`@HostBinding`および`@HostListener`デコレーター

クラスメンバーに@HostBindingおよび@HostListenerデコレーターを適用することにより、ホスト要素にバインドできます。

@HostBindingを使用すると、ホストのプロパティと属性を、プロパティとメソッドにバインドできます。

      @Component({
  /* ... */
})
export class CustomSlider {
  @HostBinding('attr.aria-valuenow')
  value: number = 0;
  @HostBinding('tabIndex')
  getTabIndex() {
    return this.disabled ? -1 : 0;
  }
  /* ... */
}

@HostListenerを使用すると、ホスト要素にイベントリスナーをバインドできます。デコレーターは、イベント名とオプションの引数の配列を受け取ります。

      export class CustomSlider {
  @HostListener('keydown', ['$event'])
  updateValue(event: KeyboardEvent) {
    /* ... */
  }
}

常に@HostBindingと@HostListenerよりもhostプロパティの使用を優先してください。 これらのデコレーターは、下位互換性のためにのみ存在します。

バインディングの衝突

テンプレートでコンポーネントを使用する場合、そのコンポーネントインスタンスの要素にバインディングを追加できます。コンポーネントは、同じプロパティまたは属性に対するホストバインディングを定義することもあります。

      @Component({
  ...,
  host: {
    'role': 'presentation',
    '[id]': 'id',
  }
})
export class ProfilePhoto { /* ... */ }

      <profile-photo role="group" [id]="otherId" />

このような場合、以下のルールによってどの値が優先されるかが決まります。

両方の値が静的な場合、インスタンスバインディングが優先されます。
一方の値が静的で他方が動的な場合、動的な値が優先されます。
両方の値が動的な場合、コンポーネントのホストバインディングが優先されます。

ホスト要素へのバインディング

@HostBindingおよび@HostListenerデコレーター

バインディングの衝突

`@HostBinding`および`@HostListener`デコレーター