Jquery 我们如何将LevateToom与angular 2集成

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


         }

    }

从'@angular/core'导入{Component，ElementRef，ngAfterViewInit}；
@组成部分({
选择器：“产品库”，
模板：`
`, 
})
导出类ZoomComponent实现ngAfterViewInit{
根节点：任意；
集装箱：任何；
构造函数（根节点：ElementRef）{
this.rootNode=rootNode；
}
ngAfterViewInit（）{
this.container=$（this.rootNode.nativeElement）.find（“#elevateToom_big”）；
//console.log（$（this.rootNode.nativeElement）.find（'#elevateToom_big'）.attr（'src'））
这个。容器。电梯门({
zoomType:“内部”，
光标：“十字线”，
zoomWindowFadeIn:500，
缩放窗口：750
}); 
}
}

---

但它并没有初始化插件。如果我在index.html中使用相同的代码，并且如果图像也存在于index.html中，那么它工作正常。

我将使用

ngAfterViewInit

hook方法。因此DOM将被初始化。ngOnInit的情况并非如此：

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

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

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

---

我将使用

ngAfterViewInit

hook方法。因此DOM将被初始化。ngOnInit的情况并非如此：

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

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

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

---

谢谢你的帮助，我也试过了。但它也不起作用。我已经根据更改编辑了问题，不客气！也许您可以使用

ViewChild

装饰器。我相应地更新了我的答案…谢谢你的帮助，我也试过了。但它也不起作用。我已经根据更改编辑了问题，不客气！也许您可以使用

ViewChild

装饰器。我相应地更新了我的答案…嘿@varada我也在尝试将elevate zoom jquery插件与Angular2集成，但出现以下错误：无法绑定到“zoom image”，因为它不是“img”的已知属性。你能告诉我你是如何将elevate zoom插件与Angular2集成的吗？任何提示都会有帮助。谢谢嘿@varada我也在尝试将elevate zoom jquery插件与Angular2集成，但出现以下错误：无法绑定到“zoom image”，因为它不是“img”的已知属性。你能告诉我你是如何将elevate zoom插件与Angular2集成的吗？任何提示都会有帮助。谢谢