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

Question

我正在尝试研究如何在 Angular 2 中使用 jQuery。我一直在尝试遵循下面提到 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();
}

这会引发异常：

无法读取未定义的属性“nativeElement”

所以我的视图查询没有找到元素？我检查了@ViewChild 的文档，它似乎将嵌套组件作为参数。我想我肯定在这里做错了什么。

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

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

Answer 1

需要做一个小改动，如下图，

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

@ViewChild('screenshot') el:ElementRef;