It is not clear in the Docs about {read: xx} option for @ViewChild.

Based on the Source code, @ViewChild as view as Component, ElementRef, TemplateRef.

For example, we have:

<one></one>
  @ViewChild(OneComponent)
one: OneComponent;
  ngAfterViewInit() {
console.log('after', this.one);
}

Now we read 'OneComponent' as a component, if we want to read it as ElementRef, we can do:

  @ViewChild(OneComponent, {read: ElementRef})
one: ElementRef;

[NOTICE]:

One thing to notice is that @ViewChild is only for viewing the its own component tamplate, you cannot view its child component template or parent component template

[Angular] ViewChild 'read' option的更多相关文章

  1. Angular ViewChild

    viewchild // 使用方法 git clone https://git.oschina.net/mumu-osc/learn-component.git cd learn-component ...

  2. Angular Viewchild undefined

    Angular的viewchild在使用的时候报错 undefined 1 检查是否在元素上打上标识 #xxx 2 查看引用元素时的时机 是否在AfterViewInit之后 3 检查元素是否在*ng ...

  3. angular select框 option空行

    1.使用option <select class="form-control" ng-model="searchType"> <option ...

  4. Angular @ViewChild,Angular 中的 dom 操作

    Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.st ...

  5. angular ViewChild ContentChild 系列的查询参数

    官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...

  6. [Angular] @ViewChild read custom directive and exportAs

    For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...

  7. [Angular] @ViewChild and template #refs to get Element Ref

    We can use @ViewChild with component: @ViewChild(AuthMessageComponent) message: AuthMessageComponent ...

  8. Angular ViewChild & ViewChildren

    基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...

  9. 如何把一个vue组件改为ionic/angular组件

    同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进 ...

随机推荐

  1. webapp的favicon应该怎样组织代码

    处理过那么多index 页面了那么关于特别针对于此页的favicon是时候详细的总结一下了 它是网站的头像,它出现在浏览器的收藏夹中(标题的旁边) ,浏览器标签页的左上角,微信公众号的logo,保存网 ...

  2. Java并发笔记(二)

    1. 活跃性危险 死锁(最常见) 饥饿 当线程由于无法访问它所需的资源而不能继续执行时,就发生了饥饿.引发饥饿最常见资源就是CPU时钟周期. 活锁 活锁指的是任务或者执行者没有被阻塞,由于某些条件没有 ...

  3. cookie登录

    #coding:utf-8 import tornado.httpserver import tornado.ioloop import tornado.options import tornado. ...

  4. selenium运行js下载文书网的文件

    from selenium import webdriver driver=webdriver.Chrome() driver.get("http://wenshu.court.gov.cn ...

  5. mogilefsd同步速度调优

    #查看主从mogadm settings list #一点点调试mogadm settings listmogadm settings set internal_queue_limit 500moga ...

  6. Selenium2+python自动化1-环境搭建【转载】

    前言 目前selenium版本已经升级到3.0了,网上的大部分教程是基于2.0写的,所以在学习前先要弄清楚版本号,这点非常重要.本系列依然以selenium2为基础,目前selenium3坑比较多,暂 ...

  7. mysql打开文件数太多的解决办法

    http://www.orczhou.com/index.php/2010/10/mysql-open-file-limit/ http://www.cnblogs.com/end/archive/2 ...

  8. 51nod 1094 和为k的连续区间【前缀和/区间差/map】

    1094 和为k的连续区间 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 一整数数列a1, a2, ... , an(有正有负),以及另一个整数k ...

  9. Python Unittest与数据驱动

    python中有一个装饰器类DDT,通过它我们可以复用代码,达到数据驱动测试的目的,该类的官方介绍可以参考 http://ddt.readthedocs.io/en/latest/index.html ...

  10. servlet之request

    1. request的setAttribute与getAttribute方法一般都是成对出现的,首先通过setAttribute方法设置属性与属性值,然后通过getAttribute方法根据属性获取到 ...