jquery - 如何在 Angular 5 中使用提升缩放？

Question

一个 Jquery 图像缩放插件

我elevate-zoom在我的 Angular 5 应用程序中使用 jquery 插件，但它显示错误

错误类型错误：this.elevatezoomBig.nativeElement.elevateZoom 不是函数

这是我的代码

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class ProductComponent implements AfterViewInit, OnInit {
    ngAfterViewInit() {
        @ViewChild('elevatezoomBig') elevatezoomBig : ElementRef;

        this.elevatezoomBig.nativeElement.elevateZoom({
            borderSize: 1,
            lensFadeIn: 200,
            cursor: 'crosshair',
            zoomWindowFadeIn: 200,
            loadingIcon: true,
            zoomWindowOffety: -50,
            zoomWindowOffetx: 50,
            zoomWindowHeight: 530,
            responsive: true
        });
    }
}

Answer 1

那么，在使用 jQuery 插件的时候要注意两点：

1. 每一个发生的事件（每一个）都会触发变更检测。因此，如果 jQuery 插件没有“受过教育”，您可能会遇到性能问题。为了减轻这种影响，您可以“在 Angular 之外”运行 jQuery 代码。
2. 它仍然是一个 jQuery 插件，所以你应该使用全局 jQuery 对象来访问它。

话虽如此，我会尝试以下方法：

// this line tells TypeScript that something called "$" exists
declare let $: any;

// I'm assuming you omitted the "component" declaration
export class ProductComponent implements AfterViewInit, OnInit {

    @ViewChild('elevatezoomBig') elevatezoomBig : ElementRef;

    constructor(private ngZone: NgZone) {}

    ngAfterViewInit(): void {
        ngZone.runOutsideAngular(() => {
            $(this.elevatezoomBig.nativeElement).elevateZoom({
                borderSize: 1,
                lensFadeIn: 200,
                cursor: 'crosshair',
                zoomWindowFadeIn: 200,
                loadingIcon: true,
                zoomWindowOffety: -50,
                zoomWindowOffetx: 50,
                zoomWindowHeight: 530,
                responsive: true
            });
        })
    }
} 

编辑：语法constructor(private ngZone: NgZone)允许您声明一个名为的属性ngZone，其值自动设置为构造函数参数的值ngZone。请参见Parameter Properties下的此处。

当您使用 jQuery 插件时，您需要已经处理了 DOM。组件的实例化（所谓的生命周期）遵循三个基本步骤：构造函数 -> 运行时填充输入属性 -> ngOnInit-> 处理模板并初始化 DOM -> ngOnAfterViewInit。如果您不太了解此序列，请帮自己一个忙，并尽快阅读此处。相信我，你以后会感谢我的。

说了这么多，我们需要调用插件中的初始化代码ngAfterViewInit。