angular - 单击以更改组件样式
问题描述
如果我单击一个按钮,我想为我的组件添加一个新样式。我想切换它。
默认是 my.componenet.scss
新版本是 my2.componenet.scss
它是我的组件加载,当我单击一个函数时,我会更改 styleurl
@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
}
你能给我一些指导吗?
解决方案
请在不同的两个类中编写样式并在单击时切换类。
<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;
}
推荐阅读
- google-bigquery - BigQuery - UDF 在视图中使用时返回 LEFT JOIN 错误
- laravel - 我的 laravel 应用程序最喜欢的功能
- python - Azure Data Lake + Python:身份验证失败
- elasticsearch - 有没有办法将数据(csv 数据)导入 winlogbeat kibana 仪表板?
- kubernetes - Kubernetes 上的超集与 Helm 不使用自定义值文件
- javascript - React native - 无效的正则表达式错误
- sql - 锁是否延伸到连接处?
- automation - 如何在将电子邮件发送给潜在客户但在旅程之间如果将潜在客户转换为联系人订户存在旅程时实施旅程
- java - Java long 转换为字节
- android - rxjava 不触发时重试