jquery - 在 Angular 2 组件中选择模板元素并传递给 jQuery

Question

我正在尝试弄清楚如何将 jQuery 与 Angular 2 一起使用。我一直在尝试遵循下面的示例，其中提到 Angular 应该控制 DOM，并且我应该将元素传递给 jQuery。

https://stackoverflow.com/a/30662773/657477

我想我不明白@ViewChild()是如何工作的。

我的组件模板中有一个 div:

<div id="screenshot">
 // ... content here
</div>

所以我将 jQuery 声明为 any:

declare var $:any;

添加此属性:

@ViewChild('screenshot') el:ElementRef;

然后要测试一下，只需尝试在 ngAfterViewInit() 中调用 hide 即可:

ngAfterViewInit() {
    $(this.el.nativeElement).hide();
}

这会引发异常:

Cannot read property 'nativeElement' of undefined

所以我的 View 查询没有找到该元素？我检查了 @ViewChild 的文档，它似乎采用嵌套组件作为参数。我想我肯定做错了什么。

我希望能够在组件中使用 jQuery 进行各种工作，因此我需要能够使用选择器然后调用 jquery 方法。

我使用了错误的方法吗？我应该如何将元素传递给 jQuery？

Answer 1

需要进行如下所示的小更改，

<div #screenshot>          //replaced id="screenshot" by #screenshot
   // ... content here
</div>

@ViewChild('screenshot') el:ElementRef;