`e:TouchEvent`的`@ HostListener`导致Firefox崩溃,"ReferenceError:未定义TouchEvent".

Question

使用@HostListener显式键入的事件参数TouchEvent,会导致Firefox崩溃,并显示以下错误消息:

ReferenceError:未定义TouchEvent.

一个例子:

@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看起来像是一个黑客,而另外两个选项没有利用框架.是否有另一种更好,更安全的方法来处理这个问题,如果没有,哪种选择更可取？

(也许有人也可以解释Angular实际在做什么以及为什么只有当事件被明确地输入为TouchEvent... 时才会发生此错误)

---

编辑:这个问题仍然存在于Angular 7中.编辑:这个问题在Angular 6中已得到明确解决.

Answer 1

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

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

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

不管怎样，这个问题似乎只发生在 JIT 编译器上，所以它可能会在 Ivy 中消失。