Angular Academy · 课时

使用 output() 输出事件

Q: 「使用 output() 输出事件」这节课中我会学到什么？

使用新的 output API 发出事件。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用新的 output API 发出事件。

使用 output() 输出事件 是 CoddyKit 上的免费 Angular Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

信号时代的输出

与信号输入一样，现代 Angular 提供 output() 函数来声明组件事件，用 EventEmitter 替代传统的 @Output。

声明输出

调用 output() 创建组件可以发出的事件。请为事件负载提供泛型类型。

import { Component, output } from "@angular/core";

@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
  changed = output<number>();
}

发出事件

在输出上调用 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<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>();

为输出设置别名

通过 alias 选项公开不同的事件名称。

valueChange = output<number>({ alias: "change" });

<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>

输出与双向绑定

将一个 input 与名为 xChange 的 output 配对即可启用双向绑定，不过使用 model() 会更加简洁。

value = input(0);
valueChange = output<number>();
// enables [(value)] on the parent

从可观察对象派生输出

互操作辅助工具 outputFromObservable 可以将 Observable 转换为输出，从而把 RxJS 流连接到新 API。

import { outputFromObservable } from "@angular/core/rxjs-interop";

clicks = outputFromObservable(this.clicks$);

类型安全

由于输出具有类型，父组件处理函数的参数会根据发出事件的负载类型进行检查，从而在编译时发现类型不匹配。

selected = output<{ id: number }>();

<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>

何时使用 output

对于新组件，请优先使用 output()：它更轻量、具有类型安全性，并且可以自然地与信号输入配合，用于实现组件通信。

快速检查

测试您对 output 函数的理解。

回顾

output() 函数可以声明带类型的事件，而无需使用 EventEmitter。使用 emit() 发出事件，通过事件绑定和 $event 进行监听，在需要时设置别名，并与信号输入配合，实现简洁的组件通信。

常见问题解答

「使用 output() 输出事件」课时是免费的吗？

是的 — 「使用 output() 输出事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「使用 output() 输出事件」这节课中我会学到什么？

使用新的 output API 发出事件。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「使用 output() 输出事件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy