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

Question

Я прохожу через "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 вместо объекта ожидаемого типа, и почему он работает (параметр получает свои значения как наберется.)

Answer 1

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

(toggleFavorite)="appToggleFavorite()"

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

Answer 2

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

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

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

Answer 3

Мое лучшее предположение будет, внимательно посмотрите на 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 используется.