Ionic 3中点击图片后填充颜色不生效问题求助

看起来你的代码有几个关键问题导致功能不生效，我来一步步帮你修正：

问题分析 #

• TS语法错误：你直接在类的顶层作用域里写了this.clapIconChecked = true;，这是不合法的，必须放在类的方法（比如构造函数、点击事件方法）里
• 缺少点击事件绑定：HTML里没有给图标绑定点击事件来切换clapIconChecked的状态
• CSS选择器不匹配：你的CSS针对.clap img设置样式，但HTML里的img没有被.clap容器包裹，导致样式无法生效
• PNG无法用CSS修改填充色：fill和stroke是SVG专属的CSS属性，如果你用的是PNG位图，这些样式完全不起作用，必须换成SVG图标

修正后的完整代码 #

1. 替换为SVG图标 #

首先把你的clap.png换成SVG格式的拍手图标（比如clap.svg），确保SVG的路径元素没有预设填充色，这样才能通过CSS自由控制颜色。

2. 修改TS代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-clap',
  templateUrl: './clap.component.html',
  styleUrls: ['./clap.component.scss']
})
export class ClapComponent {
  clapIconChecked = false;

  // 点击切换图标的选中状态
  toggleClap(): void {
    this.clapIconChecked = !this.clapIconChecked;
  }
}

3. 修改HTML代码 #

把图标放在.clap容器里，绑定点击事件和状态类：

<div class="clap" (click)="toggleClap()">
  <svg [class.checked]="clapIconChecked" src="assets/imgs/clap.svg" alt="clap icon"></svg>
</div>

如果你的SVG是内联代码，直接写<svg>标签内容会让样式控制更稳定哦。

4. 修正CSS代码 #

调整选择器结构，确保能正确选中SVG元素，同时补全动画定义：

.clap {
  position: relative;
  outline: 1px solid transparent;
  border-radius: 0;
  border: 0 solid #a750a9;
  top: -0.2rem;
  height: 44px;
  margin: 0 auto 0 2.3rem;
  background: none;
  cursor: pointer;
  animation: pulse 2s infinite;

  svg {
    width: 20px;
    fill: none;
    stroke: #a750a9;
    stroke-width: 2px;
    margin-top: -1.5rem;
    transition: all 0.3s ease;
  }

  svg.checked {
    fill: #a750a9;
    stroke: #a750a9;
    stroke-width: 1px;
  }

  &:hover {
    cursor: pointer;
    border: 0 solid #a750a9;
    transition: border-color 0.3s ease-in;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50%;
    width: 44px;
    height: 44px;
  }

  &:hover:after {
    animation: shockwave 1s ease-in infinite;
  }
}

// 补全动画定义
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes shockwave {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

额外备选方案 #

如果实在不想替换成SVG，只能通过切换两张不同颜色的PNG图片实现效果：

<div class="clap" (click)="toggleClap()">
  <img [src]="clapIconChecked ? 'assets/imgs/clap-filled.png' : 'assets/imgs/clap.png'" alt="clap icon">
</div>

内容的提问来源于stack exchange，提问作者core114