angular - `@HostListener` 的 `e: TouchEvent` 导致 Firefox 崩溃 "ReferenceError: TouchEvent is not defined."

Question

将 @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 中得到修复。

Answer 1

当方法上有装饰器时，typescript 编译器将参数类型存储在元数据中，这在桌面 Firefox 中失败，因为那里没有定义 TouchEvent。它可以通过用 stub 填充缺失的类型来解决。只需将以下代码添加到 polyfills.ts

for (const type of ['TouchEvent']) {
    if (typeof window[type] === 'undefined') {
        window[type] = function () { };
    }
}

要填充其他类型，请将它们添加到列表中。一句警告 - 这可能会破坏通过检测 window.TouchEvent 检查是否存在触摸事件的代码。

无论如何，这个问题似乎只发生在 JIT 编译器上，所以它可能会随着 Ivy 消失。