Question

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

ERROR TypeError：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插件时要注意两件事：

每个发生的事件（每个事件）都会触发变更检测。因此，如果jQuery插件没有受过教育，那么＃34;您可能会遇到性能问题。要减弱这一点，您可以在Angular＆＃34;。
它仍然是一个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的值。请参阅参数属性下的here。

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

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

如何在Angular 5中使用elevate-zoom？

1 个答案: