Использовать переменную в теге стиля в шаблоне angular?
Я работаю над приложением angular 5, и у меня есть требование применить динамический CSS в теге стиля в шаблоне. Я пробовал некоторые решения, но они не работают.
app.component.ts
customCss : any;
constructor(){}
ngOnInit(){
this.customCss['color'] = "red";
}
app.component.html
<div>
<span class = "custom_css">This is angular 5 application</span>
</div>
<style>
.custom_css{
color: {{customCss.color}};
}
</style>
Когда я проверяю класс custom_css в браузере, то в стиле он показывает
.custom_css{
color: {{customCss.color}};
}
Любая помощь приветствуется.
Он работает во всех других случаях, но не работает для части css.
Я не знаю, что этот Angular позволит вам иметь style в шаблоне. Но создать динамический элемент несложно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете использовать директиву [ngStyle]:
<span [ngStyle] = "{'color': 'red'}">
This is angular 5 application
</span>
Или вот так:
<span [ngStyle] = "applyStyles()">
This is angular 5 application
</span>
И в компоненте:
applyStyles() {
const styles = {'color' : 'red'};
return styles;
}
Вы можете использовать [style.customClass] = «methodInComponent ()» ...
Это применит класс, если метод в вашем компоненте вернет true.
Данный ответ работает, если у вас есть несколько элементов, которые нужно изменить в данном компоненте, если вам нужно изменить полный общий вид вашего приложения на основе выбора пользователя (и на лету), единственный способ, который я нашел до сих пор, - это переопределить css в javascript следующим образом:
this.stylesService.get().subscribe(({ customStyles }) => {
const style = document.createElement('style');
style.innerHTML =
`.picture {
background-image: url(${customStyles.backgroundUrl});
}
h1, h2 {
color: ${customStyles.primaryColor};
}`;
document.body.appendChild(style);
});
Кстати, если вы установите такой цвет:
<div [style.color] = "color"></div>
где color='var(--cssValue)' это не получится!
Однако это работает правильно:
<div [ngStyle] = "{color: color}"></div>
Однако вы можете использовать var (), как этот <div [style.color] = "'var(--poop)'">poop</div>, где вы определили :host { --poop: brown; }. Обычно вы не хотели бы этого делать, но вот как вы могли бы это сделать.
Взгляните на этот stackoverflow.com/a/46536494/112104