Свойство Angular2 динамического изменения CSS
Мы делаемПриложение Angular2 и мы хотим иметь возможность каким-либо образом создать глобальную переменную CSS (и обновлять значения свойств всякий раз, когда они изменяются при назначении переменной).
Некоторое время мы использовали Polymer (теперь мы переключаемся на компоненты Angular2), и мы использовали свойства CSS (Polymer имеет некоторое заполнение), и мы просто обновили стили, используяPolymer.updateStyles()
.
Есть ли способ, как мы можем достичь аналогичной функции?
РЕДАКТИРОВАТЬ:
Мы хотим что-то похожее на Sasscolor: $g-main-color
или для пользовательских свойств CSScolor: 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 }
Можно ли использовать что-то вроде угловых труб?(Но, возможно, он работает только в HTML)
:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }