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. POJ -1679(次小生成树)模板

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions:34617   Accepted: 12637 D ...

  2. Windows Server 创建环回网卡

    1.以管理员身份运行cmd后,在cmd命令窗口中执行:hdwwiz 启动硬件添加向导. 2.在添加硬件向导中选择手动安装或自动搜索都可以.然后选择网络适配器. 3.选择网络适配器:厂商选择Micros ...

  3. 编写Shell脚本的最佳实践,规范一

    随着写的SHELL程序越来越多,发现自己每次写都有不同的习惯或者定义了不同的东西,变量名定义得不一样,整个程序缩进不统一,没有注释等问题,等我回过头看这些程序的时候发现很麻烦.所以写了个shell代码 ...

  4. css字体投影

    最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了.今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法.希望能对大 ...

  5. [洛谷1972][SDOI2009]HH的项链

    题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...

  6. 数据库函数:sqlite3_exec() SQL语句

    函数:sqlite3_exec(),称为便捷函数,封装了好多任务. 函数声明: int  sqlite3_exec( sqlite   * , const  char * sql , sqlite_c ...

  7. 7.添加OpenStack计算服务

    添加计算服务 安装和配置控制器节点 创建数据库 mysql -uroot -ptoyo123 CREATE DATABASE nova; GRANT ALL PRIVILEGES ON nova.* ...

  8. .apache.commons.io 源代码学习(一)

    java的初学者,准备通读各种高水平源代码,提升能力. 为了避免自己的惰性,写博客. 版本:2.5 开发平台:netbeans. 今天是第一天,网上先看个例子:http://www.importnew ...

  9. laravel-u-editor工具栏语言切换的方法

    更改/config/app.php/locale,可支持en,zh_CN,zh_TW,我们一般设为zh_CN

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

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