码迷,mamicode.com
首页 > 其他好文 > 详细

angular2的ElementRef在组件中获取不到

时间:2017-08-01 12:36:57      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:获取   wip   操作dom   class   imp   ons   script   api   天才   

 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在组件中获取不到

标签:获取   wip   操作dom   class   imp   ons   script   api   天才   

原文地址:http://www.cnblogs.com/xuzimian/p/7267584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!