IE11 中未定义的 ClipboardEvent答案

【问题标题】：ClipboardEvent undefined in IE11IE11 中未定义的 ClipboardEvent
【发布时间】：2018-07-18 22:25:52
【问题描述】：

我的 Angular 指令之一中有以下代码：

  @HostListener('paste', ['$event'])
  onPaste($event: ClipboardEvent) {
    setTimeout(() => {
      const input = (<HTMLInputElement>$event.target);
      input.value = input.value.replace(/\D/g, '');
    });
  }

它在 IE11 中失败，错误提示为 ClipboardEvent is undefined。幸运的是，我可以将它输入到 Event，但我想知道它为什么会中断 - 我可以在 angular-cli.json 中添加任何库以使其与ClipboardEvent 一起使用吗？

"lib": [
  "es2017",
  "dom"
],

“dom”是Event 的来源...

【问题讨论】：

考虑到 ClipboardEvent 甚至在运行时都不可用，这尤其奇怪。这是一个类型注释。 IE11 必须以某种方式通过源映射分析打字稿。

标签： angular events internet-explorer-11

【解决方案1】：

在 IE 中使用 angulars JIT（即时编译）构建模式似乎是一个问题。它有助于使用 AOT（Ahead-Of-Time）。那么加载网站就没有错误了。

ng build --aot

JIT 使浏览器在运行时编译代码，而 IE 似乎无法正确编译（这是猜测！）。
以下是 AOT 和 JIT 之间差异的解释： https://angular.io/guide/aot-compiler

注意：
在 IE 中仍然无法从剪贴板粘贴。这里很好地解释了为什么它不能在任何地方工作：Clipboard Event（堆栈溢出）

【讨论】：

【解决方案2】：

这样使用

@HostListener('paste', ['$event'])
  onPaste($event) {
    var clipboardData; 
    if (window['clipboardData']) { // IE 
       clipboardData = window['clipboardData']; 
    } else if ($event.originalEvent.clipboardData && $event.originalEvent.clipboardData.getData) { // other browsers 
       clipboardData = $event.originalEvent.clipboardData; }
    }}

剪贴板事件仍处于实验技术阶段。这将起作用。

【讨论】：