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

Question

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

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;

  }