output()による出力
新しいoutput APIでイベントを発行します。
「output()による出力」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Signal時代のOutput
Signal Inputに加えて、最新のAngularではoutput()関数を使ってコンポーネントイベントを宣言できます。従来の@OutputとEventEmitterを置き換える機能です。
Outputの宣言
output()を呼び出して、コンポーネントが発行できるイベントを作成します。ペイロードの型にはジェネリック型を指定します。
import { Component, output } from "@angular/core";
@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
changed = output<number>();
}イベントの発行
Outputでemitを呼び出すと、リスナーに値を送信できます。
export class CounterComponent {
changed = output<number>();
count = 0;
inc() {
this.count++;
this.changed.emit(this.count);
}
}親からのリスニング
親コンポーネントはイベントバインディングを使って購読し、発行されたペイロードには$eventを使用します。
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) {
this.total = value;
}ペイロードなしのOutput
データを持たないイベントには、output<void>()を使用し、引数なしでemitします。
closed = output<void>();
close() {
this.closed.emit();
}outputとEventEmitterの違い
output() APIはよりシンプルで、RxJSに依存しません。EventEmitterのインスタンスを作成する必要はなく、関数が代わりに作成します。
// classic:
@Output() changed = new EventEmitter<number>();
// modern:
changed = output<number>();Outputのエイリアス設定
aliasオプションを使うと、異なる公開イベント名を指定できます。
valueChange = output<number>({ alias: "change" });
<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>Outputと双方向バインディング
inputと、xChangeという名前のoutputを組み合わせると双方向バインディングを有効にできます。ただし、model()を使うとより簡潔に実現できます。
value = input(0);
valueChange = output<number>();
// enables [(value)] on the parentObservableからのOutputの派生
相互運用ヘルパーoutputFromObservableを使うと、ObservableをOutputに変換できます。RxJSストリームと新しいAPIを橋渡しする機能です。
import { outputFromObservable } from "@angular/core/rxjs-interop";
clicks = outputFromObservable(this.clicks$);型安全性
Outputには型が付いているため、親のハンドラーパラメーターは発行されたペイロードの型と照合され、型の不一致をコンパイル時に検出できます。
selected = output<{ id: number }>();
<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>outputを使う場面
新しいコンポーネントではoutput()を優先してください。軽量で型安全なうえ、Signal Inputとも自然に組み合わせられ、コンポーネント間の通信を表現できます。
クイックチェック
output関数について理解度を確認しましょう。
まとめ
output()関数は、EventEmitterを使わずに型付きイベントを宣言します。emit()で発行し、イベントバインディングと$eventでリッスンします。必要に応じてエイリアスを設定し、Signal Inputと組み合わせることで、コンポーネント間の通信を簡潔に実現できます。
よくある質問
「output()による出力」レッスンは無料ですか？
はい。「output()による出力」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「output()による出力」で何を学びますか？
新しいoutput APIでイベントを発行します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「output()による出力」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- input()によるSignal入力
- 必須入力と変換入力
- output()による出力
- viewChildによるビュークエリ