Question

我已经在Angular 5中创建了一个组件，用于指示通过多个阶段的进度。它在Chrome中运行良好，但在IE11中进行测试时，它有一些奇怪的行为，使其无法使用。

组件使用SVG并使用Angular指令和属性绑定生成图像的元素。在IE11中，它不会渲染所有元素立即。它将加载空的进度条和＆＃34;阶段1＆＃34;标签。如果我单击其中一个文本框然后单击它将加载＆＃34;第2阶段＆＃34;标签。重复这几次后，它最终会渲染一切。但是，在更改文本框中的值时，更新并不像在Chrome中那样流畅。

以下是展示此问题的StackBlitz示例。

这似乎是与在SVG元素上使用 ngFor 相关的问题，但我不知道为什么或如何解决它。

非常感谢任何帮助。

---------- 编辑 -------------

我发现问题是由一个特定的角度绑定引起的。如果我从 progress-stage-bar.component.html 的第14行删除以下绑定，那么IE将按预期工作。

[class.current-stage]="isCurrentStage(stage)"

我试图用[ngClass]替换它，但是会出现同样的问题。

任何人都可以帮助我理解为什么Internet Explorer在Chrome浏览器中没有问题时会出现问题？

Answer 1

经过一些戳戳和刺激后，我发现这与此StackOverflow Question中描述的问题相同。

简而言之，Internet Explorer 11不支持JavaScript＆＃34; classList＆＃34; SVG元素的属性，Angular在运行时使用它来处理任何[ngClass]或[class。??????]绑定。

某些善良的人已经创造了一个＆＃34; shim＆＃34;或＆＃34; polyfill＆＃34;为此，命名为classlist.js。在一个新的Angular项目的 polyfill.ts 中已有关于此的评论：

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

这在Angular GitHub页面中被提升为bug，但官方的回应似乎是使用已经提到过的垫片。

Angular 5 - 带有* ng的SVG导致IE11中的渲染问题，而不是Chrome

1 个答案: