Angular JS 2.0 基于用户输入切换样式表

Question

如何根据 AngularJS 2.0 应用程序中的按钮单击切换样式表？

现在我在 index.html 页面的头部包含样式表。

Answer 1

我会利用 ngStyle 指令：

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

从方法（链接到点击事件）更新 style、size 值将更新您的样式：

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

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

Answer 2

@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

Angular JS 2.0 基于用户输入切换样式表

Angular JS 2.0 switch stylesheets based on User Input

javascript

angular2-forms

angular2-template

angular