单击以更改组件样式

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