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. Apache-commons.BeanUtils浅析

    BeanUtils:通过反射控制JavaBean属性的实用方法.     1.cloneBean(Object) Object          克隆一个bean是基于可用属性的get和set方法,即 ...

  2. 51nod 1273 旅行计划——思维题

    某个国家有N个城市,编号0 至 N-1,他们之间用N - 1条道路连接,道路是双向行驶的,沿着道路你可以到达任何一个城市.你有一个旅行计划,这个计划是从编号K的城市出发,每天到达一个你没有去过的城市, ...

  3. jquery.uploadify不支持MVC的Authorize

    原文发布时间为:2011-10-18 -- 来源于本人的百度文章 [由搬家工具导入] 为什么jquery.uploadify不支持MVC的Authorize呢,因为flash的cookie跟服务端的不 ...

  4. Action中动态方法的调用 Action中通配符的使用 Result的配置

       Action中动态方法的调用 动态方法调用(Dynamic Method Invocation,DMI) 标识符:! 一.通过以下选中的文件来查看是否禁止调用动态方法

  5. sql 取一张表的全部外键

    select a.name as 约束名, object_name(b.parent_object_id) as 外键表, d.name as 外键列, object_name(b.reference ...

  6. Oracle 整理

    高效分页 select * from ( select rownum r,a from yourtable order by name ) --之所以没有把<=20放在最外面,也就是我一直用的写 ...

  7. GHC extensions

    OverloadedStrings 这是最常见的一个扩展,很多时候都能看到   Haskell中,数字是num的多态,比如:   a :: Int a = 1   b :: Double b = 1 ...

  8. [Oracle] Transporting Tablespace

    Transporting Tablespace Between Database [测试目的] 利用Oracle TTS(transport tablespace)特性实现表空间合并 [主要步骤] 确 ...

  9. Error:Execution failed for task ':bearBabyClient:processDebugManifest'. > Manifest merger failed with multiple errors, see logs

    具体报错如上: 在右侧中 大方块圈中的[com.android.support:support-v4:26.0.0-alpha1] 这个文件导致的,在这的清单文件第27行合并失败,让使用tools:r ...

  10. 我在16ASPX下了一个系统是ACCESS和VS2005做的我想把那个连接数据库的'DB_16aspx'的名字改了进不了了可是?

    靠,在web.config或者其他配置文件中把数据库连接字符串改称你的新名字不就行了