webentwicklung-frage-antwort-db.com.de

Variable im Style-Tag in der Winkelvorlage verwenden?

Ich arbeite an der Anwendung "angle 5", und ich habe die Anforderung, dynamisches css in style tag in template anzuwenden.

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>

Wenn ich die custom_css-Klasse im Browser inspiziere, wird sie im Stil angezeigt 

.custom_css{
   color: {{customCss.color}};
}

Jede Hilfe wird geschätzt.

10
Lakhvir Singh

Sie können die [ngStyle] Direktive verwenden:

<span [ngStyle]="{'color': 'red'}">
 This is angular 5 application
</span>

Oder so:

<span [ngStyle]="applyStyles()">
 This is angular 5 application
</span>

Und in der Komponente:

applyStyles() {
    const styles = {'color' : 'red'};
    return styles;
}
4
ritaj

Übrigens, wenn Sie die Farbe so einstellen:

<div [style.color]="color"></div>

wo color='var(--cssValue)' es würde nicht funktionieren!

Dies funktioniert jedoch korrekt:

<div [ngStyle]="{color: color}"></div>
0
Humberd

Sie können [style.customClass] = "methodInComponent ()" verwenden ...

Dadurch wird die Klasse angewendet, wenn die Methode in Ihrer Komponente true zurückgibt. 

0
Paul

Die gegebene Antwort funktioniert, wenn Sie nur wenige Elemente in einer bestimmten Komponente ändern müssen. Wenn Sie das gesamte Erscheinungsbild Ihrer App basierend auf der Wahl des Benutzers (und im Handumdrehen) ändern müssen, besteht der einzige Weg darin Überschreiben Sie css im Javascript wie folgt:

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