单击以更改组件样式

Question

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

Deafult is my.componenet.scss

新版本是my2.componenet.scss

它是我的组件加载，当我单击一个函数时，我会更改样式URL

@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;
}