首页 > 代码库 > angular2的ElementRef在组件中获取不到
angular2的ElementRef在组件中获取不到
angular2的ElementRef在组件中获取不到
angular2不推荐操作dom，但是实际应用中不可避免的需要使用到dom操作，怎么操作，官方文档提供了一系列api（ElementRef，ViewContainerRef ，TemplateRef）配合
@ViewChild或@ViewChildren就可以获取到dom元素，但是这个过程中有些文档未提及的坑，本人不小心踩进去，半天才爬出来，因此分享一下。
首先，需要在ng2的模板中使用 #banners 定义一个模板局部变量，如：
<div class="swiper-wrapper" #bannersEL></div>
接着在模板对应的组件类中，使用组件中元数据@ViewChild来获取模板局部变量的读写权限：
export class DemoComponent implements AfterViewInit {
@ViewChild("bannersEL") bannersEl: ElementRef;
ngAfterViewInit(): void {
console.log(this.bannersEl);
}
}
其中 @ViewChild("bannersEL") bannersEl: ElementRef 还可以使用如下语法限定局部变量的权限：
@ViewChild("bannersEL"，｛read:ElementRef｝) bannersEl: ElementRef;
还需要注意点，this.bannersEl 对象获取模板局部变量时机，仅在ngAfterViewInit生命周期之后才，也就是说在组件构造器，及onint等生命周期时是获取不到的。
然后还有一个最坑人的一点#bannersEL 模板局部变量最好写在html元素的最前面，像上面那样在模板标签中定义模板局部变量，居然会导致组件中获取不到，目前还不知道原因为何，正确写法如下
<div #bannersEL class="swiper-wrapper">
angular2的ElementRef在组件中获取不到
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。