Привязка к источнику событий - PullRequest
Новая
       3

Привязка к источнику событий

0 голосов
/ 17 сентября 2018

Я прохожу через "Angular Up and Running" Шьяма Сешадри, опубликованную О'Рейли. В обсуждении «Вывод и выдача событий» я немного запутался.

EventEmitter в компоненте объявлен, инициализирован и реализован как: 

@Output() private toggleFavorite: EventEmitter<Stock>;

constructor() {
 this.toggleFavorite = new EventEmitter<Stock>();
}

onToggleFavorite(event) {
 console.log('We are toggling the favorite state for this stock.', event);
 this.toggleFavorite.emit(this.stock);
}

Привязка в app.component.html гласит: 

(toggleFavorite)="appToggleFavorite($event)"

Но метод в app.component.ts определяется как: 

appToggleFavorite(stock: Stock) {
 console.log('Favorite for stock ', stock, ' was triggered.');
}

Если привязка передает объект $ event, а связанный метод ожидает тип Stock, почему это работает?

(И это работает, я проверял это.)

Я не спрашиваю, что делает объект $ event, я это уже знаю. Пожалуйста, перечитайте мой вопрос внимательно. Я спрашиваю: когда связанная функция ожидает типизированный параметр, почему привязка к объекту EventEmitter передает объект $ event вместо объекта ожидаемого типа, и почему он работает (параметр получает свои значения как наберется.)

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Технически, $event не является необходимым и создает путаницу. 

(toggleFavorite)="appToggleFavorite()"

также будет работать, так как вы подразумеваете, что когда вы звоните .emit, вы будете звонить appToggleFavorite с любымтип значения присваивается .emit.А Javascript - это нетипизированный язык, поэтому он будет работать во время выполнения.

0 голосов
/ 17 сентября 2018

Это Расширенный тип из TypeScript , а не из Angular. Когда вы заявляете: 

@Output() private toggleFavorite: EventEmitter<Stock>;

Тип toggleFavorite равен <Stock>, а компилятор " wait ", этот тип возвращает значение.
Документ это правильно здесь .

0 голосов
/ 17 сентября 2018

Мое лучшее предположение будет, внимательно посмотрите на функцию appToggleFavorite ниже. 

appToggleFavorite(stock: Stock) {
 console.log('Favorite for stock ', stock, ' was triggered.');
}

Если бы он вызывался в Время компиляции , он бы выдал ошибку, сообщающую, что appToggleFavorite ожидает аргумент типа Stock, но ему не дано.

Но appToggleFavorite вызывается в время выполнения , а во время выполнения это просто HTML и JavaScript. Неважно, что получено от arg до appToggleFavorite. И, таким образом, это работает.

Просто для краткости, дочерний компонент может сообщить родительскому компоненту о чем-то через свойство Output. Это свойство Output будет использоваться шаблоном родительского компонента как event. Поэтому для прослушивания свойства Output потребуется привязка к событию. Функция обработчика, назначенная этой привязке событий, будет вызвана, как только будет вызван метод emit для EventEmitter, который был представлен как свойство Output. Функция Handler сможет удерживать только те данные, которые были переданы функции emit , только если используется зарезервированное ключевое слово $event.

...