カスタムイベントと出力

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

Angularコンポーネントは、output関数にプロパティを割り当てることでカスタムイベントを定義できます。

      @Component({/*...*/})export class ExpandablePanel {  panelClosed = output<void>();}

      <expandable-panel (panelClosed)="savePanelState()" />

output関数はOutputEmitterRefを返します。OutputEmitterRefのemitメソッドを呼び出すことで、イベントを発生させることができます。

      this.panelClosed.emit();

Angularでは、output関数で初期化されたプロパティを出力と呼びます。出力を使用すると、clickなどのネイティブブラウザイベントと同様に、カスタムイベントを発生させることができます。

Angular カスタムイベントは DOM を伝播しません。

出力名は、大文字と小文字が区別されます。

コンポーネントクラスを拡張する場合、outputsは子クラスによって継承されます。

output関数は、Angularコンパイラにとって特別な意味を持ちます。outputは、コンポーネントとディレクティブのプロパティ初期化子でのみ呼び出すことができます。

イベントデータの送出

emitを呼び出す際に、イベントデータを渡すことができます。

      // プリミティブ値を送出できます。this.valueChanged.emit(7);// カスタムイベントオブジェクトを送出できますthis.thumbDropped.emit({  pointerX: 123,  pointerY: 456,})

テンプレートでイベントリスナーを定義する場合、$event変数からイベントデータにアクセスできます。

      <custom-slider (valueChanged)="logValue($event)" />

出力名のカスタマイズ

output関数は、テンプレートでイベントに異なる名前を指定できるパラメーターを受け入れます。

      @Component({/*...*/})export class CustomSlider {  changed = output({alias: 'valueChanged'});}

      <custom-slider (valueChanged)="saveVolume()" />

このエイリアスは、TypeScriptコードでのプロパティの使用には影響しません。

一般的に、コンポーネントの出力のエイリアスは避けるべきですが、この機能は元の名前のエイリアスを保持しながらプロパティの名前を変更する場合や、ネイティブDOMイベントの名前との衝突を避ける場合に役立ちます。

プログラムによる出力の購読

コンポーネントを動的に作成する場合は、コンポーネントインスタンスから出力イベントをプログラムで購読できます。 OutputRef型にはsubscribeメソッドが含まれています。

      const someComponentRef: ComponentRef<SomeComponent> = viewContainerRef.createComponent(/*...*/);someComponentRef.instance.someEventProperty.subscribe(eventData => {  console.log(eventData);});

Angularは、サブスクライバーを持つコンポーネントを破棄するときに、イベントサブスクリプションを自動的にクリーンアップします。または、イベントから手動で購読解除できます。subscribe関数は、unsubscribeメソッドを持つOutputRefSubscriptionを返します。

      const eventSubscription = someComponent.someEventProperty.subscribe(eventData => {  console.log(eventData);});// ...eventSubscription.unsubscribe();

イベント名の選択

HTMLElementなどのDOM要素のイベントと衝突する出力名を選択することは避けてください。名前の衝突は、バインドされたプロパティがコンポーネントのものであるか、DOM要素のものであるかについて混乱を招きます。

コンポーネントセレクターのように、コンポーネント出力にプレフィックスを追加することは避けてください。特定の要素は1つのコンポーネントしかホストできないため、カスタムプロパティはすべてコンポーネントに属すると見なすことができます。

常にcamelCase出力名を使用してください。「on」で始まる出力名は避けてください。

RxJSを使用したoutputs

outputsとRxJSの相互運用性については、RxJS interop with component and directive outputsを参照してください。

`@Output`デコレーターを使用した出力の宣言

Tip: Angularチームは新規プロジェクトではoutput関数の使用を推奨していますが、元のデコレーターベースの@OutputAPIは引き続き完全にサポートされています。

代替として、新しいEventEmitterにプロパティを割り当て、@Outputデコレーターを追加することで、カスタムイベントを定義できます。

      @Component({/*...*/})export class ExpandablePanel {  @Output() panelClosed = new EventEmitter<void>();}

EventEmitterのemitメソッドを呼び出すことで、イベントを発生させることができます。

`@Output`デコレーターを使用したエイリアス

@Outputデコレーターは、テンプレートでイベントに異なる名前を指定できるパラメーターを受け入れます。

      @Component({/*...*/})export class CustomSlider {  @Output('valueChanged') changed = new EventEmitter<number>();}

      <custom-slider (valueChanged)="saveVolume()" />

このエイリアスは、TypeScriptコードでのプロパティの使用には影響しません。

`@Component`デコレーターでの出力の指定

@Outputデコレーターに加えて、@Componentデコレーターのoutputsプロパティを使用して、コンポーネントの出力を指定できます。これは、コンポーネントが基底クラスからプロパティを継承する場合に役立ちます。

      // `CustomSlider`は`BaseSlider`から`valueChanged`プロパティを継承します。@Component({  /*...*/  outputs: ['valueChanged'],})export class CustomSlider extends BaseSlider {}

outputsリストにエイリアスも指定できます。エイリアスは文字列の後にコロンを付けて記述します。

      // `CustomSlider`は`BaseSlider`から`valueChanged`プロパティを継承します。@Component({  /*...*/  outputs: ['valueChanged: volumeChanged'],})export class CustomSlider extends BaseSlider {}