Question

如何更改点击图标的颜色？

使用ngClass是最好的选择吗？

到目前为止，我所做的就是为我的图标分配一个类。

<ion-card>
    <ion-row>
        <ion-col>
            <button ion-button icon-left clear small>
                <ion-icon name="eye" #name [ngClass]="{
                'isActive' : isActive}" (click)="activeCheck(name)">
                </ion-icon>
            </button>
        </ion-col>
    </ion-row>
</ion-card>

.ts文件

export class NewsPage implements OnInit {
    isActive: boolean = false;

    activeCheck(name) {
        console.log(name);
        this.isActive = !this.isActive;
    }
}

Answer 1

为激活的类添加一些样式，然后执行此操作。 ngClass根据isActive变量的值动态添加类。您可以将isActive值更改用于（单击），而不是使用函数调用。

<ion-icon name="eye" #name [ngClass]="isActive ? 'activated' : ''" (click)="isActive = !isActive">
</ion-icon>

Answer 2

您实际上不需要此功能。您只需在模板中切换new_list = [expression for_loop_one_or_more conditions]属性的值即可。

此外，在isActive而不是(click)上创建button事件处理程序。

然后，使用ion-icon来缩短语法。

代码如下：

[class.isActive]="isActive"

这是您推荐的Working Sample StackBlitz。

单击按钮时如何更改图标颜色？

2 个答案: