2

我正在阅读 O'Reilly 出版的 Shyam Seshadri 的“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 对象而不是预期类型的​​对象，为什么它似乎工作（参数获取它的值作为打字。）

4

3 回答 3

2

从技术上讲，这$event是不必要的并且会造成混乱。

(toggleFavorite)="appToggleFavorite()"

也可以，因为您暗示当您调用 时.emit，您将appToggleFavorite使用给定的任何值类型来调用.emit. 而且 Javascript 是一种无类型语言，因此它可以在运行时工作。

于 2018-09-17T20:01:23.600 回答
0

我最好的猜测是，仔细看看appToggleFavorite下面的函数。

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

如果它在编译时被调用，它会抛出一个错误，说appToggleFavorite期望一个类型的 argStock但没有给出一个。

但是在运行时appToggleFavorite被调用，而在运行时，它只是 HTML 和 JavaScript。它不关心作为to收到的内容。因此它起作用了。argappToggleFavorite

简而言之，子组件可以通过其Output上的属性让父组件知道某些事情。Output然后，父组件的模板将使用此属性作为event. 因此，要侦听该Output属性，将需要一个事件绑定。分配给此事件绑定的处理程序函数将在作为属性公开的emit方法被调用时立即被调用。仅当使用保留关键字时，处理程序函数才能获取传递给函数的数据。EventEmitterOutputemit$event

于 2018-09-17T19:38:29.940 回答
0

它是TypeScript的高级类型，而不是来自 Angular。当您声明：

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

toggleFavoriteis的类型，<Stock>编译器正在“等待”该类型以返回值。
这个文档就在这里。

于 2018-09-17T20:08:04.450 回答