web-dev-qa-db-fra.com

Comment utiliser l'interpolation de chaîne dans une balise de style dans Angular composant?

@Component({
  selector: 'app-style',
  template: `
    <style>
      .test {
        color: {{ textColor }}
      }
    </style>
  `
})
export class StyleComponent {
  textColor = "red";
}

Cela ne semble pas fonctionner et j'ai besoin que mes styles soient dynamiques et dans certaines classes CSS. Y a-t-il un autre moyen de faire cela?

cssstringangularstylesinterpolation
6
S. Johnson

Lorsque le composant est rendu, la balise style se déplacera vers l'élément head de la page et toute syntaxe angulaire à l'intérieur de cet élément sera ignorée.

le seul moyen que j'ai trouvé est de créer l'élément de style dynamique et de fournir le style souhaité.

app.component.ts

  textColor = 'red';
  constructor(private el: ElementRef) {

  }

  ngOnInit() {

    let style: string = `
     .test {color :${this.textColor}; }
    `;

    this.createStyle(style);

  }

  createStyle(style: string): void {
    const styleElement = document.createElement('style');
    styleElement.appendChild(document.createTextNode(style));
    this.el.nativeElement.appendChild(styleElement);
  }

app.template.html

<span class="test">test</span>

stackblitz demo

3
malbarmawi

Vous pouvez utiliser la directive ngStyle comme ceci peut-être;

@Component({
  selector: 'app-style',
  template: `
   <ul>
      <li [ngStyle]="{color: textColor}">List Item</li>
   </ul>
  `
})
export class StyleComponent {
  textColor = "red";
}
2
Alperzkn

J'avais affronté le même problème. Dans mon cas, l'utilisation avait et XML où il changeait la couleur et sur le chargement de l'application que j'appelais et API pour lire XML et obtenir un objet JSON. J'avais classé tous les éléments de couleur comme PrimaryForeground, PrimaryBackground, PrimaryHover, etc. Une fois l'objet json obtenu, je mettais à jour les valeurs de cette variable.

1
Krishna

essayez avec $ {}

template: `
<style>
  .test {
    color: ${textColor}
  }
</style>

`

0
Fateh Mohamed

Vous pouvez accéder au style de couleur par [style.color] ou spécifier une classe définie dans la feuille de style [class]:

<div [style.color]="color">Style Test</div>
<div [class]="className">Class Test</div>

Voici un exemple en cours d'exécution.

0
ibenjelloun

Si vous souhaitez charger dynamiquement un fichier CSS, vous pouvez effectuer la tâche "facile" Au début, (vous avez dans le dossier "style1.css" et "style2.css"), vous écrivez uniquement dans votre app.component.html

<link rel="stylesheet" [href]='myStyle'>
...rest of tags...

//In your app.component.ts
myStyle="assets/style1.css"

Mais le problème est que vous obtenez une erreur "valeur non sécurisée utilisée dans un contexte d'URL de ressource", vous devez donc utiliser Domsatinizer. Alors

Votre app.component comme

<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl(myStyle)'>
..rest of your div..

Dans votre app.component.ts

import { DomSanitizer } from '@angular/platform-browser';

@Component({...})
export class appComponent{
   myStyle="assets/style1.css"
   constructor(public sanitizer: DomSanitizer) {}
}
0
Eliseo