6

寻找有关如何使用 Angular Elements 的指南，这些元素可以在其他浏览器中使用，尤其是 Internet Explorer 11。

到目前为止，遵循使用 ngDoBootstrap 定义自定义元素（Angular Element）的推荐约定。它仅适用于 Chrome，但对于 IE，元素标签在 DOM 中可见，但浏览器上没有显示任何内容。架构如下：组件、服务、管道……都被分成模块。

然后使用 customElements.define() 定义父组件。一旦将其应用到 DOM 中，诸如单击事件更改检测之类的操作在 chrome（当前版本：72.0.3626.121）中运行良好，但在 IE 中没有任何显示。我花了几个小时研究让它在 IE 中工作的不同方法。我查看了此处提供的一些问题和答案，尤其是使用 polyfills 但没有成功。

然后，我尝试按父 > 子的顺序一次定义一个组件，但又遇到了不同的问题，IE 开始抛出脚本错误，特别是与 zone.js 和 vendor.js（但不是在 chrome 中）有关。这样做时，我能够看到元素，但操作和更改检测不起作用。

我在这里尝试了这种方法，但后来开始遇到依赖注入错误。到目前为止，一个问题导致另一个问题。

选择使用 AngularElements 的原因是尝试将其与使用不同技术堆栈编写的现有项目集成。

4

3 回答 3

6

除了添加 polyfill，我还需要声明Zone_enable_cross_context_check。然后我能够看到在 DOM 中呈现的父组件模板的内容。从那时起，对于所有其他组件，尤其是在模板中，变更检测不再像预期的那样工作。ngIf 不起作用，因为模板永远不会更新。我不知道为什么它不起作用，只要我有所有的 polyfils 并且 elements-zone-strategy 用于定义自定义元素。

下面是一些显示这一点的图像：

获取数据成功后订阅后： 在此处输入图像描述

模板：

在此处输入图像描述

设置超时：

在此处输入图像描述

正如您在 IE 更改检测中看到的那样，它并没有像我期望的那样工作。在这种情况下，它仅在加载元素（组件）时工作一次，但对于其他事件则不工作。我曾尝试在需要的地方使用 changeDetectorRef 来检测更改。这并没有成功。

屏幕截图取自 Internet Explorer 11。下面是来自 Chrome 的屏幕截图，显示更改检测按预期工作，内容也因此成功加载。

铬合金：

在此处输入图像描述

最后我会说 Angular Elements 在 chrome 中运行良好，但在 IE 中却不行工作。那段时间最好与另一个库/框架一起工作。

于 2019-03-25T13:19:38.007 回答
0

从官方文档中我们可以看出：

最近开发的自定义元素 Web 平台功能目前在许多浏览器中得到原生支持。其他浏览器的支持正在等待或计划中。

在此处输入图像描述

我也尝试测试官方文档包含的demo，它在Chrome浏览器中运行良好，在IE/Edge浏览器中无法运行。

在 IE 浏览器中会显示语法错误，如下所示：

在此处输入图像描述

因此，正如官方文档所说，他们正在努力实现自定义元素以支持 IE/Edge 浏览器。您也可以将此问题反馈给Angular Issues。

于 2019-03-25T09:30:53.663 回答
0

它支持所有浏览器，您需要更改polyfill.ts文件

  1. 为了支持 Internet Explorer 9、10 或 11 和 Chrome <55，需要以下所有 polyfills

    import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set';

  2. IE10 和 IE11 需要以下对 SVG 元素的 NgClass 支持

    import 'classlist.js'

  3. IE10 和 IE11 需要以下反射 API。

    import 'core-js/es6/reflect';

所以去你的src/pollyfill.ts文件启用这些 Internet Explorer 依赖项。如果缺少任何依赖项，您可以使用这些。并且工作正常。
您可以在此处了解有关 Angular 浏览器支持的更多信息

于 2019-03-25T10:04:41.987 回答