angular6 - 如何在 angular4 或更高版本中更改 mouseover 和 mouseleave 上的图像 src?
问题描述
我对角度非常陌生,我想使用鼠标悬停事件来更改 src 值。我们如何在 Angular 4 或更高版本中做到这一点?请帮我。
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>
解决方案
让我们看一下如何使用模型而不是重写元素属性:
<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
推荐阅读
- hyperledger-fabric - 在 Hyperledger Fabric 中以高速率发送交易时,Orderer 未发现错误
- android - 如何从覆盖活动的片段中膨胀菜单
- performance - MarkLogic - 错误日志文件中的慢速 Fsync 通知/警告不断
- azure - 从哪里读取 APPINSIGHTS_INSTRUMENTATIONKEY?
- flutter - bool.fromEnvironment 总是返回 false
- django - 使用 python 将 csv 文件写入 SQL 表
- html - 了解时间 Elelement
- javascript - 如何突出显示传单地图上的标记与表格行上的数据匹配?
- angular - 按数值对对象数组进行排序
- php - 在 echo sumbit 按钮中未在 php 中重定向