全局切换 CSS 类？

Question

我有一些用红色勾勒出每个 div 的 CSS。我用它来调试，看看元素是如何对齐的。

我有一个按钮，目前可以在我的应用程序上切换一堆调试功能。我也想加入红色轮廓的切换。

考虑到我正在使用 angular 和 angular 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 head 部分中的 link href 标记由 样式管理器。

这绝对是一种更简洁的方法。本站源码可访问here。