Javascript Angular2 动态更改 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33328347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 dynamic change CSS property
提问by tenhobi
We are making an Angular2 applicationand we want to be able to somehow create a global CSS variable (and update the properties' values whenever changed when the variable is assigned).
我们正在制作一个Angular2 应用程序，我们希望能够以某种方式创建一个全局 CSS 变量（并在分配变量时更新属性值）。
We had used Polymer for a while (now we are switching to Angular2 components) and we had used CSS properties (Polymer has some polyfill) and we had just update styles using Polymer.updateStyles().
我们已经使用 Polymer 一段时间了（现在我们正在切换到 Angular2 组件）并且我们使用了 CSS 属性（Polymer 有一些 polyfill）并且我们刚刚使用Polymer.updateStyles().
Is there any way how we can achieve a similar function?
有什么办法可以实现类似的功能吗？
EDIT:
编辑：
We want something similar to Sass color: $g-main-coloror to CSS custom properties color: var(--g-main-color)and whenever we decide to change the value of the property, e.g. something like updateVariable('g-main-color', '#112a4f')it dynamicly update the value everywhere. All that while an app is running.
我们想要一些类似于 Sasscolor: $g-main-color或 CSS 自定义属性的东西，color: var(--g-main-color)并且每当我们决定更改属性的值时，例如像updateVariable('g-main-color', '#112a4f')它这样的东西动态地更新无处不在的值。所有这一切都在应用程序运行时。
EDIT 2:
编辑2：
I want to use some global CSS variables in different parts (host, child element...) of my CSS and be able to change the value immediately - so if I change my-color variable, it changes everywhere in app.
我想在我的 CSS 的不同部分（主机、子元素...）使用一些全局 CSS 变量，并且能够立即更改该值 - 所以如果我更改 my-color 变量，它会在 app.js 中的任何地方更改。
I will use Sass syntax for example:
例如，我将使用 Sass 语法：
:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }
Is possible to use something like Angular pipes? (But it supposedly only works in HTML)
是否可以使用 Angular 管道之类的东西？（但据说它只适用于 HTML）
:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }
采纳答案by monkeythedev
Just use standard CSS variables:
只需使用标准 CSS 变量：
Your global css (eg: styles.css)
您的全局 css（例如：styles.css）
body {
--my-var: #000
}
In your component's css or whatever it is:
在您组件的 css 或其他任何内容中：
span {
color: var(--my-var)
}
Then you can change the value of the variable directly with TS/JS by setting inline style to html element:
然后你可以直接用 TS/JS 通过将内联样式设置为 html 元素来更改变量的值：
document.querySelector("body").style.cssText = "--my-var: #000";
Otherwise you can use jQuery for it:
否则，您可以使用 jQuery：
$("body").css("--my-var", "#fff");
回答by Gerard Sans
1) Using inline styles
1) 使用内联样式
<div [style.color]="myDynamicColor">
2) Use multiple CSS classes mapping to what you want and switch classes like:
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">
Code samples from: https://angular.io/cheatsheet
代码示例来自：https: //angular.io/cheatsheet
More info on ngClass directive : https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
有关 ngClass 指令的更多信息：https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
回答by Shikloshi
You don't have any example code but I assume you want to do something like this?
您没有任何示例代码，但我假设您想做这样的事情？
@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>`
})
You assign ng-classto a variable which is dynamic (a property of a model called TodoModelas you can guess).
您分配ng-class给一个动态变量（TodoModel您可以猜测的模型属性）。
todo.toggle()is changing the value of todo.statusand there for the class of the input is changing.
todo.toggle()正在改变 的值，todo.status并且输入的类正在改变。
This is an example for class name but actually you could do the same think for css properties.
这是一个类名的例子，但实际上你可以对 css 属性做同样的思考。
I hope this is what you meant.
我希望这就是你的意思。
This example is taken for the great egghead tutorial here.
此示例适用于此处的精彩蛋头教程。
回答by bertrandg
I did this plunkerto explore one way to do what you want.
我做了这个 plunker来探索一种方法来做你想做的事。
Here I get mystylefrom the parent component but you can get it from a service.
在这里，我mystyle从父组件获取，但您可以从服务获取它。
import {Component, View} from 'angular2/angular2'
@Component({
selector: '[my-person]',
inputs: [
'name',
'mystyle: customstyle'
],
host: {
'[style.backgroundColor]': 'mystyle.backgroundColor'
}
})
@View({
template: `My Person Component: {{ name }}`
})
export class Person {}
回答by Enm
Angular 6 + Alyle UI
Angular 6 + Alyle 用户界面
With Alyle UI you can change the styles dynamically
使用 Alyle UI，您可以动态更改样式
Here a demo stackblitz
这是一个演示 stackblitz
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
AlyleUIModule.forRoot(
{
name: 'myTheme',
primary: {
default: '#00bcd4'
},
accent: {
default: '#ff4081'
},
scheme: 'myCustomScheme', // myCustomScheme from colorSchemes
lightGreen: '#8bc34a',
colorSchemes: {
light: {
myColor: 'teal',
},
dark: {
myColor: '#FF923D'
},
myCustomScheme: {
background: {
primary: '#dde4e6',
},
text: {
default: '#fff'
},
myColor: '#C362FF'
}
}
}
),
LyCommonModule, // for bg, color, raised and others
],
bootstrap: [AppComponent]
})
export class AppModule { }
Html
html
<div [className]="classes.card">dynamic style</div>
<p color="myColor">myColor</p>
<p bg="myColor">myColor</p>
For change Style
对于改变风格
import { Component } from '@angular/core';
import { LyTheme } from '@alyle/ui';
@Component({ ... })
export class AppComponent {
classes = {
card: this.theme.setStyle(
'card', // key
() => (
// style
`background-color: ${this.theme.palette.myColor};` +
`position: relative;` +
`margin: 1em;` +
`text-align: center;`
...
)
)
}
constructor(
public theme: LyTheme
) { }
changeScheme() {
const scheme = this.theme.palette.scheme === 'light' ?
'dark' : this.theme.palette.scheme === 'dark' ?
'myCustomScheme' : 'light';
this.theme.setScheme(scheme);
}
}
