我们如何将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
    }); 
  }
}