Angular2动态更改CSS属性

Question

我们正在制作一个Angular2应用程序,我们希望能够以某种方式创建一个全局CSS变量(并在分配变量时更改属性的值).

我们使用了Polymer一段时间(现在我们正在切换到Angular2组件)并且我们使用了CSS属性(Polymer有一些polyfill),我们只使用了更新样式Polymer.updateStyles().

有什么方法可以实现类似的功能吗？

编辑:

我们想要类似于Sass color: $g-main-color或CSS自定义属性的东西color: var(--g-main-color),每当我们决定更改属性的值时,例如updateVariable('g-main-color', '#112a4f')它会动态地更新所有值的值.所有这一切都在应用程序运行时.

编辑2:

我想在我的CSS的不同部分(host,child element ...)中使用一些全局CSS变量,并且能够立即更改值 - 所以如果我更改my-color变量,它会在应用程序的任何位置发生变化.

我将使用Sass语法为例:

:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }

可以使用Angular管道之类的东西吗？(但它应该只适用于HTML)

:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }

Answer 1

1)使用内联样式

<div [style.color]="myDynamicColor">

2)使用多个CSS类映射到你想要的并切换类,如:

 /* CSS */
 .theme { /* any shared styles */ }
 .theme.blue { color: blue; }
 .theme.red { color: red; }

 /* Template */
 <div class="theme" [ngClass]="{blue: isBlue, red: isRed}">
 <div class="theme" [class.blue]="isBlue">

代码示例来自:https://angular.io/cheatsheet

有关ngClass指令的更多信息:https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Answer 2

只需使用标准的CSS变量:

你的全局css(例如:styles.css)

body {
  --my-var: #000
}

在你的组件的css o中它是什么:

span {
  color: var(--my-var)
}

然后,您可以通过将内联样式设置为html元素来直接使用TS/JS更改变量的值:

document.querySelector("body").style.cssText = "--my-var: #000";

否则你可以使用jQuery:

$("body").css("--my-var", "#fff");

Answer 3

你没有任何示例代码,但我想你想做这样的事情？

@View({
directives: [NgClass],
styles: [`
    .${TodoModel.COMPLETED}  {
        text-decoration: line-through;
    }
    .${TodoModel.STARTED} {
        color: green;
    }
`],
template: `<div>
                <span [ng-class]="todo.status" >{{todo.title}}</span>
                <button (click)="todo.toggle()" >Toggle status</button>
            </div>`
})

您分配ng-class给一个动态变量(TodoModel您可以猜测的模型的属性).

todo.toggle()正在改变todo.status输入的类正在改变的值.

这是类名的一个例子,但实际上你可以对css属性做同样的考虑.

我希望这就是你的意思.

这个例子是为了这里的伟大egghead教程.