Как использовать elevate-zoom в Angular 5? - PullRequest
Новая
       36

Как использовать elevate-zoom в Angular 5?

0 голосов
/ 12 июня 2018

Плагин Jquery Image Zoom

Я использую плагин elevate-zoom jquery в моем приложении 5 angular, но он показывает ошибку

ОШИБКА TypeError: this.elevatezoomBig.nativeElement.elevateZoom не является функцией

enter image description here

Вот мой код 

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

1 Ответ

0 голосов
/ 12 июня 2018

Что ж, при использовании плагинов jQuery обратите внимание на две вещи:

  1. каждое происходящее событие (каждое) будет вызывать обнаружение изменений.Поэтому, если плагин jQuery не «образован», вы рискуете столкнуться с проблемами производительности.Чтобы ослабить это, вы можете запустить код jQuery «вне Angular».
  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.См. здесь в разделе Свойства параметров .

Когда вы используете плагин jQuery, вам необходимо обработать DOM.Реализация компонента (так называемый жизненный цикл) состоит из трех основных шагов: конструктор -> среда выполнения заполняет входные свойства -> ngOnInit -> шаблон обрабатывается и инициализируется DOM -> ngOnAfterViewInit.Если вы не очень хорошо знаете эту последовательность, сделайте себе одолжение и прочитайте здесь , как только сможете.Поверь мне, ты поблагодаришь меня позже.

Сказав это, нам нужно вызвать код инициализации плагина в ngAfterViewInit.

...