Angular2动态更改 CSS 属性

我们正在创建一个 Angular2申请表，我们希望能够以某种方式创建一个全局 CSS 变量(并在变量被赋值时更新属性值)。

我们已经使用聚合物一段时间(现在我们切换到 Angular2组件) ，我们已经使用 CSS 属性(聚合物有一些填充物) ，我们只是更新样式使用 Polymer.updateStyles()。

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

编辑:

我们需要一些类似于 Sass color: $g-main-color或 CSS 自定义属性 color: var(--g-main-color)的东西，无论何时我们决定更改属性的值，比如像 updateVariable('g-main-color', '#112a4f')这样的东西，它都会在任何地方动态更新值。所有这些都是在应用程序运行的时候发生的。

编辑2:

我想使用一些全局 CSS 变量在我的 CSS 的不同部分(主机，子元素...) ，并能够立即改变值-因此，如果我改变 my-color 变量，它在应用程序的任何地方都会改变。

例如，我将使用 Sass 语法:

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

有可能使用类似角管的东西吗

:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }
134236 次浏览
小开

您没有任何示例代码，但我假设您想要做这样的事情？

@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 属性进行同样的思考。

我希望你是这个意思。

这个例子是伟大的书呆子教程 给你。

小开

我做 这个傻瓜是为了探索一种方法来做你想做的事情。

这里我从父组件获取 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 {}
小开

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

小开
最佳答案

只需使用标准的 CSS 变量:

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

body {
--my-var: #000
}

在你的组件的 css 或者其他什么东西里:

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

然后您可以通过将 inline style 设置为 html 元素，直接使用 TS/JS 更改变量的值:

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

否则你可以使用 jQuery:

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

角度6 + Alyle 用户界面

使用 Alyle UI，您可以动态地更改样式

这是 演示 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

<div [className]="classes.card">dynamic style</div>
<p color="myColor">myColor</p>
<p bg="myColor">myColor</p>

改变风格

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);
}
}

Github 仓库


提交答案