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

Question

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

//global variables
$globalNavWidth: 250px;

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

.navbar{
width: $globalNavWidth;

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

导航中有一个按钮，单击后会触发功能“ toggleNavWidth（）”。有什么方法可以通过toggleNavWidth（）函数更改全局变量$ globalNavWidth吗？

Answer 1

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

Answer 2

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

Answer 3

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