Angular4中鼠标悬停切换图片功能失效问题求助

嘿，我来帮你排查这个问题！

你遇到的核心问题是Angular的组件渲染时机和jQuery脚本执行时机不匹配：你把jQuery脚本放在了index.html里，页面加载时这个脚本就会立即执行，但此时product.component.html里的那些小图片元素还没被Angular渲染出来呢！jQuery找不到这些元素，自然没法绑定点击事件，所以切换图片的功能就失效了——而在普通的Visual Studio项目里，HTML是一次性加载的，脚本执行时元素已经存在，所以能正常工作。

下面给你两个解决方案，推荐用第一个，更符合Angular的最佳实践：

方案1：用Angular原生方式实现（推荐） #

完全抛弃jQuery，用Angular的数据绑定和事件绑定来实现，这才是Angular项目的正确打开方式~

首先修改product.component.ts，定义主图的数据源和切换方法：

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

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
  // 初始化主图地址
  mainImageSrc = 'assets/bank/cart.png';

  // 切换主图的方法
  switchImage(newImageUrl: string) {
    this.mainImageSrc = newImageUrl;
  }
}

然后修改product.component.html，把主图的src改成数据绑定，给小图添加点击事件：

<div class="col-5">
  <div class="container">
    <img [src]="mainImageSrc" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
  </div>
  <div class="12">
    <div class="row">
      <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" (click)="switchImage('assets/Product_Details/Show1.png')">
      <img id="sm005" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" (click)="switchImage('assets/Product_Details/Show2.png')">
      <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" (click)="switchImage('assets/Product_Details/Show3.png')">
      <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" (click)="switchImage('assets/Product_Details/Show4.png')">
      <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" (click)="switchImage('assets/Product_Details/Show5.png')">
    </div>
  </div>
</div>

方案2：如果一定要用jQuery（不推荐） #

如果你坚持要用jQuery，那得确保脚本在组件渲染完成后再执行。可以借助Angular的生命周期钩子ngAfterViewInit，这个钩子会在组件的视图完全渲染完成后触发：

修改product.component.ts：

import { Component, AfterViewInit } from '@angular/core';
// 声明jQuery的$变量，避免TypeScript报错
declare var $: any;

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements AfterViewInit {

  ngAfterViewInit() {
    // 此时组件视图已经渲染完成，能找到所有小图片元素
    $('img[id^=sm00]').click(function () {
      $('#ProductImage').attr('src', $(this).attr('ref'));
    });
  }
}

另外要注意：如果你的jQuery是通过index.html的script标签引入的，要确保这个标签在Angular的main.js之前加载，否则ngAfterViewInit里会找不到$。

小提醒 #

在Angular项目里，尽量避免直接用jQuery操作DOM，因为Angular有自己的变更检测机制，直接操作DOM可能会导致视图和数据不同步，也不利于项目的维护和扩展。

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