如果在html文件中有以下按钮
<button (click)="doSomething('testing', $event)">Do something</button>
另外,在相应的组件中,我有以下函数
doSomething(testString: string, event){
event.stopPropagation();
console.log(testString + ': I am doing something');
}
是否应该为$event
输入分配一个合适的类型?event参数本身是一个对象,但是如果我将其分配给一个type对象,就会得到一个错误
类型对象上不存在属性“stopProposation”
那么,Typescript认为$event
输入是什么呢?
4条答案
按热度按时间332nm8kg1#
@AlexJ建议
通过
$event
传递的事件是一个DOM事件,因此可以使用EventName
作为类型。在您的示例中,此事件是
MouseEvent
,文档中引用了在所有这些情况下,您都将得到
MouseEvent
。另一个例子:如果您有此代码
当事件触发时,您将得到一个
FocusEvent
。因此,您可以非常简单地执行此操作,控制台记录事件,您将看到一条类似于以下内容的消息,其中包含事件名称
您可以随时访问文档以获取现有Events的列表。
您也可以检查所有类型移植的TypeScript
dom.generated.d.ts
。在您的情况下,stopPropagation()
是Event
的一部分,由MouseEvent
扩展。vatpfxk52#
一些常用事件及其相关名称(MouseEvent、FocusEvent、TouchEvent、DragEvent、KeyboardEvent):
通用Event与以下各项关联:
*更改
*滚动
*提交
*切换
如果深入研究Typescript's repository, dom.generated.d.ts provides a global events interface(Eric's answer功不可没),可以在第5419行找到所有的事件处理程序Map:
ijxebb2r3#
根据官方消息,
event
的类型为Object
,同样在我的情况下,当我将event
类型转换为对象时,它不会引发任何错误,但在阅读angular2的文档后,发现event
的类型为EventEmitter
,因此您可以将事件类型转换为EventEmitter
这里是相同http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview的plunkr
有关详细信息,请参阅此处https://angular.io/docs/ts/latest/guide/template-syntax.html#!#事件绑定
7qhs6swi4#
前面的回答很好地处理了原来的问题,引导我走上了正确的方向。
然而,我在开始学习Angular(和前端)时偶然发现了这个页面,并且对所提到的类型是如何记录和维护的没有一个清晰的了解。
MouseEvent
和Focus Event
都是Mozilla的Web API's
规范的一部分--大多数现代Web浏览器使用的事实上的API,用于向JavaScript运行时公开功能。如果您习惯于Java这样的后端环境,则可以将Web API规范看作是由语言提供者维护的中心文档(在Java的情况下是Oracle's Java Doc)加上一些对第三方API的引用的大致等价物。
与Java/C#规范不同,在前端,每个浏览器提供商都可以自由选择支持哪些部分-虽然市场上的所有产品都很可能支持常见事件(如click),但随着您深入了解更高级的功能,这并不是一个保证。然而,Web API的规范文档在跟踪主要浏览器对所有指定功能的支持方面做得很好,例如,这里可以参考
MouseEvent
的浏览器兼容性。有关Web API的详细介绍,请查看Mozzila's Page上的官方演示文稿