Angular JS 2.0 Switch-Stylesheets basierend auf Benutzereingabe

Question

Wie kann ich die Stylesheets basierend auf dem Button-Klick in einer AngularJS 2.0-Anwendung wechseln?

Wie im Moment bin ich Stylesheets auf den Kopf der Index.html Seite.

Answer 1

@Component({ 
    selector: ..., 
    template: ..., 
    styles: [` 
:host(:not(.some-class)) { 
    border: solid 1px red; 
} 
:host(.some-class) { 
    border: solid 3px green; 
} 

` 
]}) 
export class MyComponent { 
    @HostBinding('class.some-class') isSomeClass = true; 
} 

Plunker example

Answer 2

Ich würde die ngstyle Richtlinie nutzen:

<h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}"> 
    Change style of this text! 
</h1> 
<div (click)="changeStyle()">Update style</div> 

Updading die style, size Werte von einer Methode (mit einem Klick Ereignis verknüpft) wird Ihr Stil aktualisieren:

export class SomeComponent { 
    style = 'normal'; 
    weight = 'normal'; 
    size = '20px'; 

    changeStyle($event: any) { 
    this.style = 'italic'; 
}