Angular中根据CSS类（active/hover）切换图片路径的实现方法

方案一：纯CSS实现（更简洁高效） #

不需要写任何Angular逻辑，用CSS状态控制图片切换是最优解。

先调整HTML结构，把两张图片放在同一个容器里：

<li>
  <a
    aria-expanded="false"
    [routerLink]="['/restaurant-a']"
    routerLinkActive="active">
    <span class="logo-wrap">
      <img class="logo-icon mr-3" src="http://contohaja/inipasbiasaaja" alt="默认图标" />
      <img class="logo-icon mr-3 hover-icon" src="http://contohaja/inihover" alt="hover/激活图标" />
    </span>
  </a>
</li>

接着添加CSS样式，通过opacity控制显示：

.logo-wrap {
  position: relative;
  display: inline-block;
}

.logo-icon {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.2s ease; /* 可选，添加平滑过渡动画 */
}

/* 默认只显示普通图标 */
.hover-icon {
  opacity: 0;
}

/* 当a标签hover或处于active状态时，切换图标显示 */
a:hover .hover-icon,
a.active .hover-icon {
  opacity: 1;
}

a:hover .logo-icon:not(.hover-icon),
a.active .logo-icon:not(.hover-icon) {
  opacity: 0;
}

方案二：Angular模板逻辑绑定 #

如果需要通过动态修改src实现，可以结合路由激活状态和hover事件：

修改HTML，绑定事件和动态src：

<li>
  <a
    #activeLink="routerLinkActive"
    aria-expanded="false"
    [routerLink]="['/restaurant-a']"
    routerLinkActive="active"
    (mouseenter)="isHovering = true"
    (mouseleave)="isHovering = false">
    <img 
      class="logo-icon mr-3"
      [src]="activeLink.isActive || isHovering ? 'http://contohaja/inihover' : 'http://contohaja/inipasbiasaaja'"
      alt="图标" />
  </a>
</li>

然后在组件类里定义状态变量：

// mycomponent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.css']
})
export class MycomponentComponent {
  isHovering = false;
}

两种方案都能实现需求，优先选纯CSS方案，因为不需要额外的脚本逻辑，性能更好。

内容的提问来源于stack exchange，提问作者a fan of fried rice