Jquery 如何在角度5中使用提升缩放？

我在angular 5应用程序中使用了

elevate zoom

jquery插件，但显示错误

错误类型错误：this.elevateToombig.nativeElement.elevateToom不是 函数

这是我的密码

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
        });
    }
}

---

在使用jQuery插件时，请注意两件事：

发生的每一个事件（每一个）都将触发一个变化检测。因此，如果jQuery插件没有受到“教育”，那么就有可能导致性能问题。为了减弱这种影响，可以运行jQuery代码“outside Angular”

它仍然是一个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
            });
        })
    }
} 

编辑：语法

构造函数（私有ngZone:ngZone）

允许您声明名为

ngZone

的属性，其值自动设置为构造函数参数

ngZone

的值。请参见参数属性下的

使用jQuery插件时，需要已经处理DOM。组件的实例化（所谓的生命周期）遵循三个基本步骤：构造函数->运行时填写输入属性->

ngOnInit

->处理模板并初始化DOM->

ngOnAfterViewInit

。如果你不太清楚这个顺序，帮自己一个忙，尽快阅读。相信我，你以后会感谢我的

---

说到这里，我们需要调用

ngAfterViewInit

中的插件初始化代码，感谢chiesa的快速回复，但我正在使用OnInit和AfterViewInit，它显示错误<代码>模块解析失败：保留关键字“private”（88:20）。您可能需要适当的加载程序来处理此文件类型。|this.galleryTop.swiper.params.control=this.galleryThumbs.swiper；|this.galleryThumbs.swiper.params.control=this.galleryTop.swiper；|建造商（私人、ngZone、核心_1.ngZone）；|{ngZone.runOutsideAngular（函数（）{我编辑了我以前的答案。你必须在构造函数中有

私有ngZone:ngZone

，并且在

ngAfterViewInit

中有插件初始化代码。我尝试过这个，一个错误消失了，但函数不起作用。好吧，我认为你应该尝试用这个错误生成一个最小的可复制示例，这样我们就可以工作了请看这里：。如果不看到问题，就不可能完全重建问题。