按下按钮后如何更改 styleurls 链接并保持这种状态答案

【问题标题】：How to change the styleurls link after pressing a button and keep it that way按下按钮后如何更改 styleurls 链接并保持这种状态
【发布时间】：2018-01-04 04:21:59
【问题描述】：

我正在处理一个angular 2 项目，并试图包含一个设置主题。我创建了 3 个component.scss 文件red.component.scss、yellow.component.scss 和blue.component.scss。我想这样做，以便根据用户从按钮输入的内容，component.ts 文件中的styleURLS 会随着所选颜色相关的scss 文件url 发生变化。有可能吗？怎么做？或者有没有其他有效且简单的方法来实现这一点？

【问题讨论】：

标签： css angular angular2-template scss-lint

【解决方案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

【讨论】：

【解决方案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;

  }

【讨论】：