全局切换CSS类？

Question

我有一些CSS以红色概述了每个div。我将其用于调试，以查看元素如何对齐。

我有一个按钮，当前可以在我的应用程序上切换一系列调试功能。我也想将红色轮廓的切换合并到一起。

考虑我正在使用角度和角度cli，我将如何切换这些类？我想尽可能避免动态加载和卸载样式表。

Answer 1

您可以从Angular Material网站本身获得启发。如果您访问URL，则该站点的顶部栏为您提供了更改主题的选项。在相似的行上，您可以分别拥有一个专门用于调试和正常模式的CSS。调试模式将实现您想要的效果。在内部，Material代码执行以下操作。

1. 维护CSS样式列表的列表。在中搜索themes变量 src \ app \ shared \ theme-picker \ theme-picker.ts文件。

2. 根据用户选择的选项，它调用setStyle方法 的StyleManager（在 src \ app \ shared \ style-manager \ style-manager.ts）。

3. HTML link href部分中的head标签由 样式经理。

这似乎绝对是一种更清洁的方法。该网站的源代码可以访问here。