将 @HostListener
与明确键入为 TouchEvent
的事件参数一起使用,会导致 Firefox 崩溃并显示以下错误消息:
ReferenceError: TouchEvent is not defined.
一个例子:
@HostListener('touchstart', ['$event']) // or 'touchend', 'touchmove'
onTouchStart(e: TouchEvent): void {}
我自己可以想出一些方法来防止这种情况发生:
- 使用
e: TouchEvent | any
或e: any
(或者根本不指定类型) - 使用
elRef.nativeElement.addEventListener('touchstart', (e: TouchEvent) => {})
- 使用
Observable.fromEvent(elRef.nativeElement, 'touchstart').subscribe((e: TouchEvent) => {})
但使用any
或| any
看起来像是 hack,其他两个选项没有利用该框架。 有没有其他更好、更安全的方法来处理这个问题,如果没有,哪个选项更可取?
(也许有人还可以解释 Angular 实际上在做什么,以及为什么只有当事件被显式键入为 TouchEvent
时才会发生此错误...)
编辑:这个问题在 Angular 7 中仍然存在。
编辑:这个问题显然已在 Angular 6 中得到修复。
最佳答案
当方法上有装饰器时,typescript 编译器将参数类型存储在元数据中,这在桌面 Firefox 中失败,因为那里没有定义 TouchEvent。它可以通过用 stub 填充缺失的类型来解决。只需将以下代码添加到 polyfills.ts
for (const type of ['TouchEvent']) {
if (typeof window[type] === 'undefined') {
window[type] = function () { };
}
}
要填充其他类型,请将它们添加到列表中。一句警告 - 这可能会破坏通过检测 window.TouchEvent
检查是否存在触摸事件的代码。
无论如何,这个问题似乎只发生在 JIT 编译器上,所以它可能会随着 Ivy 消失。
关于angular - `@HostListener` 的 `e: TouchEvent` 导致 Firefox 崩溃 "ReferenceError: TouchEvent is not defined.",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51124242/