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

Question

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

Answer 1

你可以使用属性绑定(bind)

我的解决方案

//// 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