如何从Angular组件更改css变量值答案

【问题标题】：How to change a css variable value from Angular component如何从Angular组件更改css变量值
【发布时间】：2019-04-02 11:36:07
【问题描述】：

我正在尝试在 Angular 中创建一个具有可切换宽度值的导航菜单。在我的资产文件夹中，我有一个 variables.scss 文件，其中包含捆绑在一个文件中的所有变量，以便于访问。我的 variables.scss 看起来像这样：

//global variables
$globalNavWidth: 250px;

导航 Angular 组件有自己的名为 navbar.scss 的样式表，它的 width 属性链接到一个变量，如下所示：

.navbar{
width: $globalNavWidth;

我的文件夹结构看起来像这样。

我的导航中有一个按钮，点击时会触发“toggleNavWidth()”功能。有什么办法可以通过这个 toggleNavWidth() 函数更改全局变量 $globalNavWidth？

【问题讨论】：

参考这个enter link description here
SCSS 是一个预处理器，这意味着值$globalNavWidth 仅在从scss 编译到css 期间可用。您应该使用ElementRef 在运行时更改navbar css 属性。
检查此解决方案。我想这就是你想要的。 stackoverflow.com/questions/33328347/…
@ashish.gd 我还需要其他组件中的 $globalNavWidth（以通过对 $globalNavWidth 所做的更改来缩放它们） ElementRef 中是否有可以解决此问题的功能？或者我应该拆分我的变量以便隔离 $globalNavWidth 并且我可以用硬编码值替换它？
因为您需要基于.navbar css 宽度属性的更改来更改应用程序范围的 css。请查看HostBinding。此链接也将有助于理解各种选项：blog.angular-university.io/angular-host-context

【解决方案1】：

您只需使用 ngStyle 或 ngClass 指令即可：https://angular.io/api/common/NgStyle

【讨论】：

问题是我对 $globalNavWidth 变量有多种用途。因此，如果我使用 ngStyle 或 Class 我必须以某种方式将我的导航宽度的新值也获取到其他组件。
您不能更改 scss 变量。因此，也许您将宽度存储在服务中。

【解决方案2】：

如果你想有条件地应用 CSS 类到元素上，请使用 [ngClass]:https://angular.io/api/common/NgClass 要不然如果您想使用 class 应用样式，请使用：https://angular.io/api/common/NgStyle

【讨论】：

【解决方案3】：

我能够使用 ashish.gd 建议的主机绑定解决我的问题。如果不是因为变量在多个 scss 文件之间共享的事实，其他关于使用 ngStyle 或 ngClass 的答案对我有用。感谢大家的帮助！

【讨论】：