Выходные данные с output()
Генерируйте события с помощью нового API output.
«Выходные данные с output()» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Выходные данные эпохи сигналов
Наряду с входными сигналами современный Angular предоставляет функцию output() для объявления событий компонентов, заменяя классический @Output с помощью EventEmitter.
Объявление выходного события
Вызовите 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
API output() проще и не связан с 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 с output под именем xChange включает двустороннюю привязку, хотя 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()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Выходные данные с output()»?
Генерируйте события с помощью нового API output. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Выходные данные с output()»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Входные сигналы с input()
- Обязательные и преобразуемые входные данные
- Выходные данные с output()
- Запросы представления с viewChild