如何在 Angular 中动态切换样式？

【问题标题】：How can I switch styles dynamically in Angular?如何在 Angular 中动态切换样式？
【发布时间】：2018-09-21 15:21:25
【问题描述】：

我有一个styles.css 和另一个styles-highcontrast.css，它们基本上包含相同的样式，但后来针对有视力问题的人进行了改编。
styles-highcontrast.css 在 angular.json 中设置为 lazy。

如何通过单击按钮在两者之间切换？

谢谢

【问题讨论】：

【解决方案1】：

将您的高对比度 css 包装在某个特定的类中，例如：

a {color: red;}

.high-contrast a {color: extraRed;}

在 HTML 中：

<body ng-class="{'high-contrast': vm.useHighContrast}">
    <button ng-click="vm.useHighContrast = !vm.useHighContrast">Switch contrast</button>

【讨论】：