[Angular] ViewChild 'read' option
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的更多相关文章
- Angular ViewChild
viewchild // 使用方法 git clone https://git.oschina.net/mumu-osc/learn-component.git cd learn-component ...
- Angular Viewchild undefined
Angular的viewchild在使用的时候报错 undefined 1 检查是否在元素上打上标识 #xxx 2 查看引用元素时的时机 是否在AfterViewInit之后 3 检查元素是否在*ng ...
- angular select框 option空行
1.使用option <select class="form-control" ng-model="searchType"> <option ...
- Angular @ViewChild,Angular 中的 dom 操作
Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.st ...
- angular ViewChild ContentChild 系列的查询参数
官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...
- [Angular] @ViewChild read custom directive and exportAs
For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...
- [Angular] @ViewChild and template #refs to get Element Ref
We can use @ViewChild with component: @ViewChild(AuthMessageComponent) message: AuthMessageComponent ...
- Angular ViewChild & ViewChildren
基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...
- 如何把一个vue组件改为ionic/angular组件
同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进 ...
随机推荐
- 汕头市队赛 SRM 09 B 撕书
B 撕书II-3 SRM 09 背景&&描述 琉璃手头有一黑一白两本魔法书,一本是<缟玛瑙的不在证明>,另一本是<白色相簿1.5> 传说同时打开这两本书 ...
- 汕头市队赛 SRM 09 A 撕书
A 撕书I-3 SRM 09 背景&&描述 琉璃在撕书. 书总共有n页,都悬浮在数轴上,第i页的位置为,上面写着一个数字. 琉璃从右往左撕书.假如看到了第i页,就把在第 ...
- 魔法使的烟花(NOIP模拟赛Round 7)
[问题描述] 魔法森林里有很多蘑菇,魔法使常常采摘它们来制作魔法药水.为了在6月的那个奇妙的晚上用魔法绽放出最绚丽的烟花,魔法使决定对魔法森林进行一番彻底的勘探. 魔法森林分为n个区域,由n-1条长度 ...
- VLC for iOS 2.3.0
http://www.cocoachina.com/bbs/read.php?tid=231898 VLC for iOS 2.3.0 本帖属于CocoaChina会员发表,转帖请写明来源 ...
- Charles安装
Charles 是一个网络抓包工具,在做 APP 抓包的时候会用到,相比 Fiddler 来说,Charles 的功能更为强大,而且跨平台支持更好,所以在这里我们选用 Charles 来作为主要的移动 ...
- POCO库中文编程参考指南(4)Poco::Net::IPAddress
POCO库中文编程参考指南(4)Poco::Net::IPAddress 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmai ...
- matlab后处理保存avi动画
有时候需要在后处理时,将图片一张张合成视频,下面介绍一种简单的方法: ... aviobj=VideoWriter('example.avi');%新建叫example.avi的文件 open(avi ...
- asp.net生成word文档服务器配置
一.asp.net生成word文档,布署到正式的服务器上就出现 错误:System.Runtime.InteropServices.COMException (0x800A1098 ...
- Laravel向视图传递变量的两种方法
//方法一 return view('home.user')->with('datas', $datas); //方法二 return view('home.user.my-indent',co ...
- EntityFramework之多对多关系(四)
上篇介绍了一对多关系,下面介绍下多对多关系代码编写. 1.新建model实体,User是用户类,Role是角色类,由于是多对多关系,必须得有一个中间类,所以产生了UserRole类 public cl ...