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. JS实现 java的Map

    Map = function () { this.objects = new Object(); // 加入元素 this.put = function (key, value) { this.obj ...

  2. 通过RHN网站给RHEL打补丁

    [root@yum01 ~]# yum list-sec securityLoaded plugins: downloadonly, product-id, rhnplugin, security, ...

  3. 文件搜索工具everything

    Everything是voidtools开发的一款文件搜索工具,官网描述为“基于名称实时定位文件和目录(Locate files and folders by name instantly) (“Ev ...

  4. 创建型设计模式之单例模式(Singleton)

     结构 意图 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 适用性 当类只能有一个实例而且客户可以从一个众所周知的访问点访问它时. 当这个唯一实例应该是通过子类化可扩展的,并且客户应该无需更 ...

  5. WPF的webBrowser控件关键代码

    1.根据元素ID获取元素的值. 比如要获取<img class="" id="regimg" src="/register/checkregco ...

  6. android hook 框架 ADBI 如何实现so函数挂钩

    上一篇 android 5 HOOK 技术研究之 ADBI 项目 02 分析了hijack.c, 这个文件编译为一个可执行程序 hijack, 该程序实现了向目标进程注入一个动态库的功能.这一篇继续研 ...

  7. 内核request_mem_region 和 ioremap的理解【转】

    转自:http://blog.csdn.net/skyflying2012/article/details/8672011 版权声明:本文为博主kerneler辛苦原创,未经允许不得转载. 几乎每一种 ...

  8. php5.3+ 安装(mysqlnd )

    摘自:http://blog.csdn.net/dragon8299/article/details/6273295 如何安装mysqlnd LINUX环境中,默认情况下,php中的mysql扩展还是 ...

  9. mybatis之<trim prefix="" suffix="" suffixOverrides="" prefixOverrides=""></trim>的含义

    转自:http://blog.csdn.net/qq_33054511/article/details/70490046   <trim prefix="" suffix=& ...

  10. 考勤的lua脚本

    ngx.header.content_type = "text/plain;charset=utf-8" local cjson = require "cjson&quo ...