IE11下Angular粘贴事件调用跨模块服务抛出异常问题求助

我之前也碰到过这个诡异的问题——在IE11里用Angular处理粘贴事件时，只要在回调里调用其他模块的服务就会抛出异常，但换成点击事件调用完全正常。咱们一步步拆解问题，找到解决办法。

问题复现 #

要重现这个问题很简单：

• 要么在模板里直接绑定粘贴事件：

  <input (paste)="onPaste()" />
  

• 要么用@HostListener在组件类里注册事件：

  @HostListener('paste', [])
  async onPaste() { 
    await this.service.Do(); 
  }
  

• 在IE11中给输入框粘贴任意内容，就会看到报错：ERROR Error: Uncaught (in promise): Error: Invalid argument.

问题原因 #

这个锅主要是IE11的事件上下文和Angular Zone.js的适配问题：

1. IE11对粘贴事件的异步处理逻辑和现代浏览器差异很大，事件触发时的上下文没有被Angular的Zone正确捕获
2. Angular 5.x版本的默认polyfill虽然覆盖了大部分ES6特性，但没完全处理这种粘贴事件里的异步服务调用场景
3. 虽然IE11本身支持粘贴事件，但它对Promise异步操作的执行环境有特殊限制

解决方案 #

方案1：用NgZone强制回到Angular上下文 #

这是最稳妥的解决办法，把服务的异步调用包裹在NgZone.run()里，确保操作在Angular的Zone上下文执行：

import { Component, HostListener, NgZone } from '@angular/core';
import { YourService } from '../path-to-your-service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private zone: NgZone, private service: YourService) {}

  @HostListener('paste', [])
  async onPaste() {
    await this.zone.run(async () => {
      await this.service.Do();
    });
  }
}

方案2：补充Polyfills #

检查你的src/polyfills.ts文件，确保启用了足够的ES6兼容补丁：

// 确保这些polyfill没有被注释
import 'core-js/es6/promise';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
// 如果还是不行，添加以下两个
import 'core-js/es6/object';
import 'core-js/es6/function';

修改后重启项目，让polyfill生效。

方案3：延迟执行服务调用 #

如果不想修改Zone相关逻辑，可以用setTimeout把服务调用延迟到事件循环的下一轮，跳出粘贴事件的即时上下文：

@HostListener('paste', [])
onPaste() {
  setTimeout(async () => {
    await this.service.Do();
  }, 0);
}

验证 #

按照上面任意一种方案修改后，在IE11里测试粘贴操作，应该就不会再抛出"Invalid argument"的异常了。我当时用方案1解决了类似问题，推荐优先尝试这个。

内容的提问来源于stack exchange，提问作者Brivvirs