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. 转:mysql grant

    本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删 ...

  2. 2016-2017 ACM-ICPC, Egyptian Collegiate Programming Contest(solved 8/11)

    这套题似乎是省选前做的,一直没来写题解---补上补上>_< 链接:http://codeforces.com/gym/101147 一样先放上惨不忍睹的成绩好了--- Problem A ...

  3. Java并发编程--CyclicBarrier

    概述 CyclicBarrier是一个同步工具类,它允许一组线程互相等待,直到到达某个公共屏障点.与CountDownLatch不同的是该barrier在释放等待线程后可以重用,所以称它为循环(Cyc ...

  4. Spring 的IOC 和Aop

    Spring 的IOC 和Aop

  5. Linux Mint---ATI显卡驱动安装篇

    显卡驱动可谓是至关重要,当时折腾debian驱动的时候可是弄了好几天才搞定的,现在却非常容易就是装上, 详见这篇博客:http://www.yyearth.com/article/14-03/amd1 ...

  6. KnockJs 绑定语法

    按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法. 相关的教程大家可以去看 汤姆大叔的博客. 练习代码下载 由于没有环境,代码直接用记事本写的,可能比较乱,仅作 ...

  7. PHP 时间获取本周 本月 本季度用法

    <?php        $week_begin = mktime(0, 0, 0,date("m"),date("d")-date("w&qu ...

  8. python实现并发获取html的几种方式

    1.线程池 from concurrent.futures import ThreadPoolExecutor import requests from fake_useragent import U ...

  9. Javascript 中的 apply与call详解

    一.方法定义 1.call 方法 语法:call(thisObj,arg1, arg2, argN) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选 ...

  10. J.U.C并发框架源码阅读(十)ConcurrentLinkedQueue

    基于版本jdk1.7.0_80 java.util.concurrent.ConcurrentLinkedQueue 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL ...