角度5：JavaScript CustomEvent（填充）

Question

當我將以下代碼添加到main.ts時，CustomEvent未正確添加到窗口對象。 如果我使用JavaScript控制台添加CustomEvent，它會這樣做。 順便說一句，當我單擊觸發自定義事件的按鈕（稱為：“ choice-click”）時，就會發生此問題。

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

當我不得不將polyfill放置在Angular中並在Angular之后時，沒有任何線索，但是它可以工作。

<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script>
<script type="text/javascript">
    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 = window.Event.prototype;

    window.CustomEvent = CustomEvent;
</script>

Answer 2

如果您使用的是Angular CLI，則可以（作為替代方案）通過npm i custom-event-polyfill安裝“定制事件polyfill”，並將其添加到您的polyfills.ts中：import'custom import 'custom-event-polyfill';