Angular 5：JavaScript 自定义事件（Polyfill）

Question

当我将以下代码添加到 main.ts 时，CustomEvent 未正确添加到窗口对象。如果我使用 JavaScript 控制台添加 CustomEvent，它会这样做。顺便说一句，当我单击触发我的自定义事件的按钮（称为：“选择单击”）时会出现问题。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}

CustomEvent.prototype = (<any>window).Event.prototype;

(<any>window).CustomEvent = CustomEvent;

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

下面是两个屏幕截图。第一个，main.ts 添加了 CustomEvent。第二个，我使用 JavaScript 控制台添加 CustomEvent。

注意：当我使用 JavaScript 控制台时，$.isFunction 返回“true”

Answer 1

如果您使用的是 Angular CLI，您可以（作为替代）安装“自定义事件 polyfill”npm i custom-event-polyfill并将其添加到您的 polyfills.ts 中：import 'custom-event-polyfill';