Angular 9 ngClass 在 Internet Explorer 11 中无法正常工作答案

【问题标题】：Angular 9 ngClass not working correctly in internet explorer 11Angular 9 ngClass 在 Internet Explorer 11 中无法正常工作
【发布时间】：2020-12-02 09:06:21
【问题描述】：

我正在开发一个 Angular 9 应用程序，不幸的是我需要支持 Internet Explorer。我正在尝试使用 ngClass 更改单击事件上的 css 类，并且除了 Internet Explorer 之外，我在任何地方都可以使用它。我不知道是否需要添加任何 polyfill 来支持 ngClass。下面是一个简单的问题示例。在此示例中，我只是更改了 div 的背景颜色，它适用于 chrome 和 firefox，但不适用于 IE。

html 示例

<div (click)="toggle()" [ngClass]="active ? 'test' : 'test1'"></div>

打字稿

 toggle(): void {
    if (this.active) {
      this.active = false;
    } else {
      this.active = true;
    }
  }

css

.test {
  width: 100%;
  height: 200px;
  background-color: black;
}

.test1 {
  width: 100%;
  height: 200px;
  background-color: blue;
}

当我点击 div 时，点击会触发方法并且值会发生变化，但 css 从未调整过。

【问题讨论】：

您创建了捆绑包 es2005 和 es05？
@Eliseo 我不明白你的意思，你能解释一下吗？
您的 browserslist 文件中是否支持 IE11？
在 Angular 中，您可以在“es5”和“es2015”中生成捆绑包 -main.js、runtime.js、common.js..-。为此，您需要更改编译选项中的 tsconfig.json 指示：2015.angular.io/guide/typescript-configuration。在这种情况下，您会生成两个捆绑包。 “旧”导航器使用“es5”包，现代使用“es2015”。
哦，我明白了。为了让项目在 Internet Explorer 中运行，我不得不将目标切换到 es5。除了将目标更改为 es5 之外，您是否建议做其他事情？

标签： angular

【解决方案1】：

添加一个新的tsconfig-es5.app.json 文件。

{ "扩展": "./tsconfig.app.json", “编译器选项”：{ “目标”：“es5” } }
更新angular.json 配置。

"es5": { “tsConfig”：“./tsconfig-es5.app.json” }
运行您的应用程序：ng serve --configuration es5。我建议为方便起见，在package.json 中添加运行脚本。

【讨论】：

【解决方案2】：

我认为 if 表达式在 ngClass 中不起作用尝试使用类似的东西

<div (click)="toggle()" [ngClass]="{'test': active, 'test1': !active}"></div>

【讨论】：

我试过这个并得到了相同的结果。在 IE 之外的所有应用中都可以正常工作