jquery - 我们如何将 elevateZoom 与 angular 2 集成

Question

我在 index.html 上添加了 jquery 和缩放插件文件。在我的缩放组件上，我写了一些类似下面的代码

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