angular2的ElementRef在组件中获取不到

angular2不推荐操作dom,但是实际应用中不可避免的需要使用到dom操作,怎么操作,官方文档提供了一系列api(ElementRef,ViewContainerRef ,TemplateRef)配合

@ViewChild或@ViewChildren就可以获取到dom元素,但是这个过程中有些文档未提及的坑,本人不小心踩进去,半天才爬出来,因此分享一下。
 首先,需要在ng2的模板中使用 #bannersEL定义一个模板局部变量,如:
<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">

 但是你以为这样就完了吗,不,还有坑,如果你的模板中用了ngFor指令,并且循环绑定了模板局部变量,如:

 <div #bannersEL class="swiper-slide" *ngFor="let banner of banners;t"></div>

 //--------ts
  @ViewChildren("bannersEL") bannersEl: QueryList<ElementRef>;

  ngAfterViewInit(): void {
   console.log(this.bannersEL.length)
  }
//输出结果是0,而实际上模版最终生成的div是有3个

解决以上问题的办法就是模板代码不动,js中做如下变动:

 ngAfterViewInit(): void {
this.bannersEl.changes.subscribe((list:QueryList<ElementRef>)=>{
if(list.length > 0){
list.forEach( el=>{
el.nativeElement.style.display="none";
});
}
});
}

通过订阅changes来获取循环后得到div对象

angular2的ElementRef在组件中获取不到的更多相关文章

  1. 微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery

    节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: const query = wx.cre ...

  2. 在自定义组件中获取spring底层组件

    要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...

  3. vue父组件中获取子组件中的数据

    <FormItem label="上传头像" prop="image"> <uploadImg :width="150" ...

  4. Web项目中获取SpringBean——在非Spring组件中获取SpringBean

    最近在做项目的时候我发现一个问题:Spring的IOC容器不能在Web中被引用(或者说不能被任意地引用).我们在配置文件中让Spring自 动装配,但并没有留住ApplicationContext的实 ...

  5. delphi 从 TWebbrowse组件中获取图片

    在 delphi 中使用 TWebbrowse 组件,虽然效率不如用(idhttp之类)模拟操作效率高.但其难度低,上手快,简单粗暴有效. 从网上搜到的处理此问题的文章大多是 ctrl + c 复制到 ...

  6. 在Vue组件中获取全局的点击事件

    // 定义全局点击函数 Vue.prototype.globalClick = function (callback) { document.getElementById('main').onclic ...

  7. 微信小程序将外部数据从父组件中传入到子组件

    小程序组件开发遇到一个组件内嵌两个组件,而这两个子组件所使用的数据来自于同一个API,如下图所示. 如果这时候两个子组件各自导入同一个接口就会显得多余.另外的办法是由父组件导入接口数据,再从父组件将接 ...

  8. 【ASP.NET Core】在Blazor中获取 HTTP 上下文信息

    今天咱们来扯一下 Blazor 应用程序怎么访问 HttpContext.其实这句话有坑,为了避免大伙伴们掉茅坑,老周直接说明:Blazor 是不能访问 HttpContext 的.哪怕你在服务容器中 ...

  9. Vue3 SFC 和 TSX 方式调用子组件中的函数

    在开发中会遇到这样的需求:获取子组件的引用,并调用子组件中定义的方法.如封装了一个表单组件,在父组件中需要调用这个表单组件的引用,并调用这个表单组件的校验表单函数或重置表单函数.要实现这个功能,首先要 ...

随机推荐

  1. 信号single

    信号 Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 1.Django内置信号 Model signals pre ...

  2. 安装oracle11g client 【INS-30131】执行安装程序验证所需的初始设置失败的解决方法

    今天在服务器(操作系统windows server 2008R2)上安装Oracle11g 客户端,弹出“执行安装程序验证所需的初始设置失败”,如上图.网上找了一些方法,简单整理如下,仅供参考. 问题 ...

  3. 左侧 随着页面滚动固定 fixed. scroll .scrollTop

    1.图片. 要求:随着页面滚动 . 左侧应该顶着 浏览器顶部, 向上回滚, 就恢复原状. 2. 代码: html <div class="all "> <!-- ...

  4. matlab简介 基本操作

    1.快捷键: Tab.Ctrl+] :增加缩进 Ctrl+[ :减少缩进 Ctrl+I:自动缩进 Ctrl+R:增加注释 Ctrl+T:去掉注释 F12:设置或清除断点 F5:运行 2.特殊变量: i ...

  5. shell编程规范

    1 脚本名以.sh结尾,名称尽量见名之意,比如ClearLog.sh Clear_Log.sh clearlog.sh SerRestart.sh Ser_Restart.sh;2 尽量使用UTF-8 ...

  6. sdn交换机和普通交换机区别

    SDN交换机基本具有普通交换机的所有功能.SDN交换机特别的功能在于支持OpenFlow协议(有些只支持OpenFlow1.0,有些强点支持1.0和1.3).不过你要连接交换机再手动将所需的端口改成支 ...

  7. 命令行窗口中使用pip安装第三方库成功之后,在pycharm中仍不能使用

    在学习廖老师的Python教程的时候,遇到命令行窗口中使用pip安装第三方库成功之后,在pycharm中仍不能使用的情况, 这种情况可能是由于在本地安装了多个Python版本的缘故(只是可能的情况之一 ...

  8. C语言进阶1-#define和const

    宏的命名规范:一般以项目前缀开头,key结尾. #开头表编译. 宏的用法:1.定义常用字符串. 2.定义一段代码. const与宏的区别:1.编译时刻:宏-预编译    const-command+b ...

  9. erlang link 与 monitor

    erlang设计中,通常会有这样一个需求: 某一个进程必须依赖于令一个进程的概念,在这样的情况下就必须对两个进程之间建立一个监控或者说连接关系,以监听对方的死亡情况. erlang 提供了两个这样的方 ...

  10. JIRA 7.8 版本的安装与破解

    jira的运行是依赖java环境的,也就是说需要安装jdk并且要是1.8以上版本 除此之外,我们还需要安装MySQL,为jira创建对应的数据库.用户名和密码,如下: 注意:建库名jira,字符集为U ...