it-swarm.com.ru

Использовать переменную в теге стиля в шаблоне 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}};
}

Любая помощь приветствуется.

10
Lakhvir Singh

Вы можете использовать директиву [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;
}
4
ritaj

Вы можете использовать [style.customClass] = «methodInComponent ()» ...

Это применит класс, если метод в вашем компоненте вернет true. 

0
Paul

Данный ответ работает, если у вас есть несколько элементов для изменения в данном компоненте, если вам нужно полностью изменить внешний вид вашего приложения в зависимости от выбора пользователя (и на лету), единственный способ, который я нашел до сих пор, это переопределить 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);
});
0
Thibaud Lacan