Angular2 dynamic change CSS свойство

Question

Мы делаем приложение Angular2, и мы хотим иметь возможность каким-то образом создать глобальную переменную CSS (и обновлять значения свойств при каждом изменении при назначении переменной).

Мы использовали Polymer некоторое время (теперь мы переходим на компоненты Angular2), и мы использовали свойства CSS (у Polymer есть полипол), и мы только что обновили стили, используя Polymer.updateStyles().

Есть ли способ, как мы можем достичь аналогичной функции?

EDIT:

Мы хотим что-то похожее на Sass color: $g-main-color или в CSS пользовательских свойств color: var(--g-main-color) и всякий раз, когда мы решили изменить значение свойства, например, что-то вроде updateVariable('g-main-color', '#112a4f') динамически обновляет значение везде. Все это, пока приложение работает.

EDIT 2:

Я хочу использовать некоторые глобальные переменные CSS в разных частях (хост, дочерний элемент ...) моего CSS и быть в состоянии немедленно изменить значение - так, если изменить -цветная переменная, она меняется везде в приложении.

Я буду использовать синтаксис Sass, например:

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

можно использовать что-то вроде угловых труб? (Но это, мол, работает только в HTML)

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

Answer 1

Просто используйте стандартные CSS переменные:

Ваш глобальный CSS (например: styles.css)

body { 
    --my-var: #000 
} 

В CSS вашего компонента O бы это ни было:

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

Тогда вы можете напрямую изменить значение переменной с помощью TS/JS, установив стиль строки в элемент html:

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

В противном случае вы можете использовать JQuery для него:

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

Answer 2

Вы не имеете пример кода, но я предполагаю, что вы хотите сделать что-то вроде этого?

@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.

Надеюсь, это то, что вы имели в виду.

Этот пример взят за большой учебник по яйцам here.

Answer 3

Я сделал this plunker, чтобы изучить один из способов сделать то, что вы хотите.

Здесь я получаю 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 {} 

Answer 4

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