Angular中的动态SCSS主题：编写更好的SCSS

Question

我在HTML下面有用于角度项目的内容。我必须将“红色主题”类更改为“黄色主题，黑色主题”等其他类。当我更改这些类时，站点的整个主题都会改变。

    <div class="red-theme">
      <my-app></my-app>
    </div>

帮我为此写SCSS（@mixin，@include）。我如何为此主题管理编写SCSS。

Answer 1

您应该使用[className]指令

示例我的scss中有两个类样式

.style1 {
    font-family: verdana;
    font-size: 20px;
}

.style2 {
    color: red;
    text-align: center;
}

然后在您的组件中可以绑定到

<div [className]="'style1'">

对于您的组件，您需要编写逻辑来更改类，例如

//function to change the class from style1 to style 2 when clicked
    toggle_class(){
        if(this.my_Class=="style1"){
            this.my_Class='style2';
        }else{
            this.my_Class='style1';
        }
    }