Как мы можем интегрировать ElevateZoom с угловым 2

Question

Я добавил файл jquery и плагина масштабирования на свой index.html. На моем компоненте масштабирования я написал нечто вроде кода ниже

import { Component,ElementRef,ngAfterViewInit } from '@angular/core'; 
     @Component({ 
     selector: 'product-gallery', 
     template: ` <div class="zoomWrapper"> 
         <img id="elevatezoom_big" src="img/grande.png" data-zoom-image="img/grande.png" /> 
         </div>     
     `, 
    }) 
    export class ZoomComponent implements ngAfterViewInit{ 
    rootNode : any; 
     container: any; 
    constructor(rootNode: ElementRef) { 
      this.rootNode = rootNode; 
     } 

    ngAfterViewInit() { 
     this.container = $(this.rootNode.nativeElement).find('#elevatezoom_big'); 
     //console.log($(this.rootNode.nativeElement).find('#elevatezoom_big').attr('src')) 
      this.container.elevateZoom({ 
       zoomType: "inner", 
       cursor: "crosshair", 
       zoomWindowFadeIn: 500, 
       zoomWindowFadeOut: 750 
      }); 


     } 

    } 

Но это не инициализация плагина. Если я использую тот же код в index.html, и если изображение также присутствует в index.html, оно работает нормально.

Answer 1

Я использовал бы метод крюка ngAfterViewInit. Таким образом, DOM будет инициализирован. Это не случай с ngOnInit:

export class ZoomComponent { 
    rootNode : any; 
    container: any; 

    constructor(rootNode: ElementRef) { 
    this.rootNode = rootNode; 
    } 

    ngAfterViewInit() { // <------ 
    (...) 
    } 
} 

Редактировать

Я хотел бы также использовать ViewChild декоратора для ссылки изображения. Вот пример:

@Component({ 
    selector: 'product-gallery', 
    template: ` <div class="zoomWrapper"> 
    <img #elevatezoomBig src="img/grande.png" data-zoom-image="img/grande.png" /> 
    </div>     
    `, 
}) 
export class ZoomComponent implements ngAfterViewInit{ 
    @ViewChild('elevatezoomBig') container : ElementRef; 

    ngAfterViewInit() { 
    this.container.nativeElement..elevateZoom({ 
     zoomType: "inner", 
     cursor: "crosshair", 
     zoomWindowFadeIn: 500, 
     zoomWindowFadeOut: 750 
    }); 
    } 
}