单击以更改组件样式

Question

如果我单击一个按钮，我想为我的组件添加一个新样式。 我想切换它。

默认是 my.componenet.scss

新版本是 my2.componenet.scss

它是我的组件加载，当我点击一个函数时我会改变 styleurls

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss'],
})

这是我的功能

  public LoadDefaultStyle(){
    //  loading it styleUrls: ['./my.componenet.scss'], after rendering page
  }

  public LoadNewStyle(){
    //  loading it styleUrls: ['./my2.componenet.scss'], after rendering page
  }

你能给我一些指导吗？

Answer 1

请在不同的两个类中编写样式并在单击时切换类。

 <div class="test_class" (click)="changeColor()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

    let status: boolean = false;
changeColor(){
    this.status = !this.status;       
}

.success{
  color: green;
}
.danger{
  color: red;
}