Angular 使用@Input() 时，元素 8 不适用于 EDGE/IE11

Question

我正在尝试使用 Angular Elements 8 创建一些自定义元素，并且在我的 @Input() 上使用简单对象作为 string/number 时效果很好。但是当我想开始使用对象数组时，IE EDGE/11 抛出异常。

程序

克隆存储库（代码 github repo）或执行以下操作：

ng 新 "some name"
更新浏览器列表以包含 IE11
ng 生成组件简单列表
为带有输入的组件编写代码
提供解决方案（没有我知道的 angular 元素）并且一切正常。
添加angular个元素(ng add @angular/elements)
修改模块为bootstrap组件作为自定义元素
使用 EDGE 服务和加载，查看控制台错误

TypeError: Unable to get property 'setInputValue' of undefined or null reference at listItems.set (http://localhost:4300/vendor.js:77430:35) at DefaultDomRenderer2.prototype.setProperty (http://localhost:4300/vendor.js:80310:9) at DebugRenderer2.prototype.setProperty (http://localhost:4300/vendor.js:76553:9) at setElementProperty (http://localhost:4300/vendor.js:73738:5) at checkAndUpdateElementValue (http://localhost:4300/vendor.js:73648:13) at checkAndUpdateElementInline (http://localhost:4300/vendor.js:73576:5) at checkAndUpdateNodeInline (http://localhost:4300/vendor.js:74992:13) at checkAndUpdateNode (http://localhost:4300/vendor.js:74935:9) at debugCheckAndUpdateNode (http://localhost:4300/vendor.js:75957:5) at debugCheckRenderNodeFn (http://localhost:4300/vendor.js:75935:13)"

这是已知缺陷还是我遗漏了一些重要信息？

Answer 1

这是Angular/Elements中的缺陷。使用 document-register-elements 时，polyfill 不能可靠地调用构造函数。

要解决此问题，请为 @webcomponents/custom-elements

等自定义元素切换到另一个 polyfill

我为你的项目创建了一个 fork 并解决了这个问题。

Answer 2

不知何故，我最终得到了一个包含两个 polyfill 的设置：

import 'document-register-element';
import '@webcomponents/custom-elements';

angular 的文档注册元素，以及 webcomponents/custom-elements 的（手动）添加。这种组合导致了问题所指的确切问题。

（到目前为止）最终奏效的组合是：

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements';

Answer 3

对于那些像我一样来到这里参加 Edge 的人，我也有 :

import 'document-register-element';
import '@webcomponents/custom-elements';

交换两个导入对我来说就完成了工作：

import '@webcomponents/custom-elements';
import 'document-register-element';

Angular 使用@Input() 时，元素 8 不适用于 EDGE/IE11

Angular Elements 8 does not work with EDGE/IE11 when using @Input()

angular

angular-elements