如何在angular4或更高版本中更改鼠标悬停和鼠标离开时的图像源？

Question

我是 angular 的新手，我想使用鼠标悬停事件更改 src 值。 angular4以上版本怎么办？请帮助我。

export const ROUTES: RouteInfo[] = [
{ path: '/dashboard', title: 'Dashboard',  icon: 'fa fa-tachometer', class: '' ,name:'',src:"../../../../assets/images/header-icon.png",srcOn:"../../../../assets/images/dashboard_highlighted.png"},
{ path: '/forms', title: 'Forms',  icon:'fa fa-eyedropper', class: '',name:'',src:"../../../../assets/images/dashboard_highlighted.png",srcOn:""},
{ path: '/tables', title: 'Desk Blotter',  icon:'fa fa-pencil', class: '' ,name:'',src:"../../../../assets/images/dashboard_highlighted.png",srcOn:""},
{ path: '/bs-element', title: 'Admin',  icon:'fa fa-picture-o', class: '' ,name:'',src:"../../../../assets/images/dashboard_highlighted.png",srcOn:""},
{ path: '/login', title: 'Logout',  icon:'fa fa-power-off', class: '',name:'',src:"../../../../assets/images/dashboard_highlighted.png",srcOn:"" },
];

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}" >
        <a [routerLink]="[menuItem.path]" name="{{menuItem.name}}">
           <img src="{{menuItem.src}}" style="width:66%;"  (mouseenter)="'src=''{{menuItem.srcOn}}'"   id="{{menuItem.title}}"/> {{menuItem.title}}
        </a>
    </li>

Answer 1

让我们看看这个，看看如何使用模型而不是重写元素属性：

<img [src]="imgSrc"
           (mouseover)="imgSrc = 'http://www.impresabaraldo.it/Blog/wp-content/uploads/2015/05/casa-ecologica-vicenza.jpg'"
           (mouseout)="imgSrc = 'https://www.ediltecnico.it/wp-content/uploads/2017/06/casa-300x223.png'">

您的问题的可能解决方案可能是这样的：

export const ROUTES: RouteInfo[] = [
  { path: '/dashboard', title: 'Dashboard',  icon: 'fa fa-tachometer', class: '' ,name:'',src: '', srcOut: "../../../../assets/images/header-icon.png",srcOn:"../../../../assets/images/dashboard_highlighted.png"},
  { path: '/forms', title: 'Forms',  icon:'fa fa-eyedropper', class: '',name:'',src: '', srcOut: "../../../../assets/images/dashboard_highlighted.png",srcOn:""},
  { path: '/tables', title: 'Desk Blotter',  icon:'fa fa-pencil', class: '' ,name:'',src: '', srcOut: "../../../../assets/images/dashboard_highlighted.png",srcOn:""},
  { path: '/bs-element', title: 'Admin',  icon:'fa fa-picture-o', class: '' ,name:'',src: '', srcOut: "../../../../assets/images/dashboard_highlighted.png",srcOn:""},
  { path: '/login', title: 'Logout',  icon:'fa fa-power-off', class: '',name:'',src: '', srcOut: "../../../../assets/images/dashboard_highlighted.png",srcOn:"" },
];

请注意，我们有一个 src 属性以及一个 srcOn 和一个 srcOut。这个想法是将图像 src 属性绑定到这个 json 对象 src 属性，然后根据你的鼠标事件更新 json 对象 src 属性

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}" >
    <a [routerLink]="[menuItem.path]" name="{{menuItem.name}}">
      <img style="width:66%;"  id="{{menuItem.title}}"
           [src]="menuItem.src || menuItem.srcOut"
           (mouseover)="menuItem.src = menuItem.srcOn"
           (mouseout)="menuItem.src = menuItem.srcOut"/> {{menuItem.title}}
    </a>
  </li>

最后我建议你使用 mouseover 而不是 mouseenter

如何在angular4或更高版本中更改鼠标悬停和鼠标离开时的图像源？

How to change image src on mouseover and mouseleave in angular4 or above version?

angular6