当我将以下代码添加到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”
答案 0 :(得分:1)
当我不得不将polyfill放在直线上并且在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>
答案 1 :(得分:1)
如果您使用的是Angular CLI,则可以(可选)使用npm i custom-event-polyfill
安装“自定义事件polyfill”,并将其添加到您的polyfills.ts中:import 'custom-event-polyfill';