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. 汕头市队赛 SRM 09 B 撕书

    B 撕书II-3 SRM 09 背景&&描述 琉璃手头有一黑一白两本魔法书,一本是<缟玛瑙的不在证明>,另一本是<白色相簿1.5>     传说同时打开这两本书 ...

  2. 汕头市队赛 SRM 09 A 撕书

    A 撕书I-3 SRM 09 背景&&描述 琉璃在撕书.     书总共有n页,都悬浮在数轴上,第i页的位置为,上面写着一个数字.     琉璃从右往左撕书.假如看到了第i页,就把在第 ...

  3. 魔法使的烟花(NOIP模拟赛Round 7)

    [问题描述] 魔法森林里有很多蘑菇,魔法使常常采摘它们来制作魔法药水.为了在6月的那个奇妙的晚上用魔法绽放出最绚丽的烟花,魔法使决定对魔法森林进行一番彻底的勘探. 魔法森林分为n个区域,由n-1条长度 ...

  4. VLC for iOS 2.3.0

    http://www.cocoachina.com/bbs/read.php?tid=231898 VLC for iOS 2.3.0       本帖属于CocoaChina会员发表,转帖请写明来源 ...

  5. Charles安装

    Charles 是一个网络抓包工具,在做 APP 抓包的时候会用到,相比 Fiddler 来说,Charles 的功能更为强大,而且跨平台支持更好,所以在这里我们选用 Charles 来作为主要的移动 ...

  6. POCO库中文编程参考指南(4)Poco::Net::IPAddress

    POCO库中文编程参考指南(4)Poco::Net::IPAddress 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmai ...

  7. matlab后处理保存avi动画

    有时候需要在后处理时,将图片一张张合成视频,下面介绍一种简单的方法: ... aviobj=VideoWriter('example.avi');%新建叫example.avi的文件 open(avi ...

  8. asp.net生成word文档服务器配置

    一.asp.net生成word文档,布署到正式的服务器上就出现           错误:System.Runtime.InteropServices.COMException (0x800A1098 ...

  9. Laravel向视图传递变量的两种方法

    //方法一 return view('home.user')->with('datas', $datas); //方法二 return view('home.user.my-indent',co ...

  10. EntityFramework之多对多关系(四)

    上篇介绍了一对多关系,下面介绍下多对多关系代码编写. 1.新建model实体,User是用户类,Role是角色类,由于是多对多关系,必须得有一个中间类,所以产生了UserRole类 public cl ...