ユーザー入力に基づく角型JS 2.0スイッチスタイルシート

Question

AngularJS 2.0アプリケーションのボタンクリックに基づいてスタイルシートを切り替えるにはどうすればよいですか？

今のところ私はindex.htmlページのheadセクションにスタイルシートを含めています。

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

私はngStyleディレクティブを活用します：

styleをUpdading

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

を、（クリックイベントにリンクされている）メソッドからsize値は、あなたのスタイルを更新します。

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

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