elevateZoomと角2を統合するにはどうすればいいですか？

Question

index.htmlにjqueryとzoomプラグインファイルを追加しました。私のズームコンポーネントでは、以下のコードのようなものを書いています。

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