Question

我正在经历由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对象而不是期望类型的对象，为什么它似乎起作用（参数将其值作为键入。）

Answer 1

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

(toggleFavorite)="appToggleFavorite()"

也将起作用，因为您暗指在调用.emit时，将使用赋予appToggleFavorite的任何值类型来调用.emit。而且Javascript是一种无类型的语言，因此它将在运行时运行。

Answer 2

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

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

如果要在编译时进行调用，则会引发错误，指出appToggleFavorite期望的类型为Stock的arg，但没有给出

但是appToggleFavorite在运行时处被调用，而在运行时，其只是HTML和JavaScript。不管从arg到appToggleFavorite收到什么。因此有效。

仅简要介绍一下，子组件可以通过其上的Output属性让父组件知道某些信息。然后，此Output属性将由父组件的模板用作event。因此，要监听Output属性，将需要一个事件绑定。在公开为emit属性的EventEmitter上调用Output方法后，将立即调用分配给该事件绑定的Handler Function。仅当使用保留关键字emit 时，Handler函数才能够保留传递给$event函数的数据。

Answer 3

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

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

toggleFavorite的类型为<Stock>，而编译器将“ 等待”作为返回值的类型。
文档正确here。

事件发射器绑定

3 个答案: