我尝试让 Angular Elements 在 IE11 中工作。我的自定义元素（简单按钮）已经显示并且输入绑定按预期工作，但输出绑定没有。
在 IE 11 中单击我的自定义元素按钮会导致错误：
该对象不支持此操作
到目前为止我做了什么：
- 删除添加的自定义元素的 polyfill
ng add @angular/elements（在 IE 中无法正常工作） 将所有 Angular 包更新为
7.2.1将以下 polyfillls 添加到
polyfills.ts：
import 'core-js/shim'
import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';
手动引导模块
ng build --output-hashing=none并将所有生成的文件打包到btn-element.js其中http-server供本地测试使用（参见下面的index.html）。
我错过了特定的 polyfill 还是我做错了什么？还是现在还不可能？
app.module.ts：
@NgModule({
declarations: [ ButtonComponent ],
imports: [ BrowserModule ],
entryComponents: [ ButtonComponent ]
})
export class AppModule {
constructor(private injector: Injector) {
const customBtn = createCustomElement(ButtonComponent, { injector });
customElements.define('app-btn', customBtn);
}
ngDoBootstrap() { }
}
button.component.ts：
@Component({
template: `<button (click)="handleClick()">{{ label }}</button>`,
encapsulation: ViewEncapsulation.ShadowDom
})
export class ButtonComponent {
@Input() label;
@Output() myaction = new EventEmitter<number>();
private clicksCt: number = 0;
constructor() { }
handleClick() {
this.clicksCt++;
this.myaction.emit(this.clicksCt);
}
}
索引.html
<html lang="en">
<head>
[...]
<script type="text/javascript" src="btn-element.js"></script>
</head>
<body>
<app-btn label="Button Text"></app-btn>
<script>
var button = document.querySelector('app-btn');
button.addEventListener('myaction', function (event) {
console.log('action emitted: ' + event.detail); <!-- not working! -->
});
setTimeout(function () {
button.label = 'Async value change happened...' <!-- working! -->
}, 2000);
}
</script>
</body>
</html>
我也试过<app-btn label="Button Text" (myaction)="test($event)"></app-btn>没有成功。
编辑： 最小示例
在 IE 11 中似乎没有工作。要重现我的结果并查看 StackBitz 在 Chrome 中运行的结果，请按照以下步骤操作：
- 复制到本地机器
- 跑
npm install - 运行
npm run build && npm run package:win（对于 Windows） - 服务
index.html和生成btn-element.js的http-server
