Cambio dinamico angolare2 Proprietà CSS

Question

Stiamo creando un'applicazione Angular2 e vogliamo essere in grado di creare in qualche modo una variabile CSS globale (e aggiornare i valori delle proprietà ogni volta che viene modificato quando viene assegnata la variabile).

Abbiamo utilizzato polimero per un tempo (ora si passano a componenti Angular2) e abbiamo usato proprietà CSS (polimero abbia qualche polyfill) e avevamo appena aggiornare stili utilizzando Polymer.updateStyles().

Esiste un modo per ottenere una funzione simile?

EDIT:

Vogliamo qualcosa di simile a Sass color: $g-main-color oa CSS proprietà personalizzate color: var(--g-main-color) e ogni volta che decidiamo di cambiare il valore della proprietà, per esempio qualcosa come updateVariable('g-main-color', '#112a4f') aggiorna dinamicamente il valore ovunque. Tutto ciò mentre un'app è in esecuzione.

EDIT 2:

voglio usare alcune variabili globali CSS in diverse parti (ospite, elemento figlio ...) della mia CSS ed essere in grado di cambiare immediatamente il valore - quindi se cambio -colore variabile, cambia ovunque nell'app.

userò la sintassi Sass ad esempio:

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

è possibile utilizzare qualcosa come tubi angolari? (ma presumibilmente funziona solo in HTML)

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

Answer 1

Basta utilizzare le variabili CSS standard:

il CSS globale (ad es: styles.css)

body { 
    --my-var: #000 
} 

In del componente CSS o qualunque essa sia:

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

Poi puoi modificare il valore della variabile direttamente con TS/JS impostando lo stile in linea sull'elemento html:

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

Altrimenti si può utilizzare jQuery per esso:

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

Answer 2

Non hai alcun codice di esempio ma suppongo che si vuole fare qualcosa di simile?

@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>` 
}) 

si assegna ng-class ad una variabile che è dinamico (una proprietà di un modello chiamato TodoModel come si può intuire).

todo.toggle() sta cambiando il valore di todo.status e lì per la classe di input sta cambiando.

Questo è un esempio per il nome della classe, ma in realtà si potrebbe fare lo stesso per le proprietà CSS.

Spero che questo sia ciò che intendevi.

Questo esempio viene preso per il grande tutorial di testa di porco here.

Answer 3

Ho fatto this plunker per esplorare un modo per fare quello che vuoi.

Qui ricevo mystyle dal componente principale ma è possibile ottenerlo da un servizio.

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 {} 

Answer 4

1) Utilizzando gli stili inline

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

2) utilizzare più mapping classi CSS per quello che vuoi e passare classi come:

/* 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"> 

Esempi di codice da: https://angular.io/cheatsheet

Maggiori informazioni sulla direttiva ngClass: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html