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指令：

<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';
 }

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

2 个答案: