如何在按下按钮后更改样式链接并保持这种方式

Question

我正在研究angular 2项目，并试图包含一个设置主题。我创建了3个component.scss文件red.component.scss，yellow.component.scss和blue.component.scss。我想这样做，以便按照按钮的用户输入，component.ts文件中的styleURLS随所选颜色相关的scss文件URL而变化。有可能吗？怎么样？或者还有其他有效而简单的方法来实现这一目标吗？

Answer 1

你可以使用属性绑定

我的解决方案

//// in css file

.red {
    color: red;
}

.yellow {
    color: yellow;
}

.blue {
    color: blue;
}

.green {
    color: green;
}

/// in html

<div [class.red]="isRed" [class.yellow]="isYellow" [class.blue]="isblue" [class.green]="isGreen"  ></div>

//// and isRed, isBlue ... are boolean in ts file

Answer 2

您可以在styleUrls属性中包含多个样式表。您无法在styleUrl中添加动态属性。

您可以通过多种方式实现这一目标。

风格装订

<div [ngStyle]="setStyle()">
  LOREM IPSUM
</div>

<button (click)="changeColorCode('#9FD068')">#9FD068 </button>
<button (click)="changeColorCode('#0C66A1')">#0C66A1 </button>
<button (click)="changeColorCode('#fff000')">#fff000 </button>


  selectedColor: any = '';
  changeColorCode(colorCode: string) {
   this.selectedColor = colorCode;
  }

  setStyle() {
    return {
      'color': this.selectedColor
    };
  }

类绑定

<div [ngClass]="setClass()" #divRef>
  LOREM IPSUM
</div>
<button (click)="changeClass('red')">Red </button>
<button (click)="changeClass('green')">Green </button>
<button (click)="changeClass('blue')">Blue </button>


  selectedClass: string = '';
  changeClass(className: string) {
    this.selectedClass = className;

  }
  setClass() {
    return [this.selectedClass];
  }

  changeColorCode(colorCode: string) {
    this.selectedColor = colorCode;

  }