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. 仿Orm 自动生成分页SQL

    分页的写法 自从用上了Orm,分页这种事就是腰不酸腿不痛了.不过有时候想用纯粹的ado.net来操作,希望返回的数据是原生的DataTable或DbDataReader类似的东西,故研究下怎么生成分页 ...

  2. switch与if 性能测试

    测试结果:switch性能更高. 测试过程:新建一个Win32 Console Application, 在cpp文件中添加下面代码 #include "stdafx.h" #in ...

  3. linux下挂载U盘【转】

    转自:http://www.cnblogs.com/yeahgis/archive/2012/04/05/2432779.html 一.Linux挂载U盘:1.插入u盘到计算机,如果目前只插入了一个u ...

  4. hdu 5150(水题)

    Sum Sum Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. Google C++ 编码规范(中文版)

    Google C++ 编码规范(英文)在线地址:http://google-styleguide.googlecode.com/svn/trunk/cppguide.xml 中文版PDF下载:本地下载

  6. Ionic Angular自动捕获错误 配置Angular2.x +

    配置app.module.ts import { Pro } from '@ionic/pro'; // These are the imports required for the code bel ...

  7. 阿里云服务器,tomcat启动,一直卡在At least one JAR was scanned for TLDs yet contained no TLDs就不动了

    项目在本地是可以成功运行的,网上看到一堆各式各样的解决办法感觉都不适合我,于是绝望的删webapps,重新上传,一直不行. 重复了第3次还是第4次,居然就好了,这是什么操作.

  8. Educational Codeforces Round 31 B. Japanese Crosswords Strike Back【暴力】

    B. Japanese Crosswords Strike Back time limit per test 1 second memory limit per test 256 megabytes ...

  9. [POI2015]Kinoman

    题目大意: 给你一个长度为n的数列f,f中共有m种不同的数,每种数都有一个权值w[i]. 你可以选定一个f中的区间,定义区间的权值为这一区间只出现一次的数的权值和. 问权值最大的区间的权值是多少? 思 ...

  10. [COCI2015]JABUKE

    题目大意: 一个$n\times m(n,m\leq500)$的网格图中有若干个标记点,有$q(q\leq10^5)$个操作,每次新加入一个标记点,并询问和新加入点最近的点的距离. 思路: 记录对于每 ...