[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中左括号[]进 ...
随机推荐
- POJ -1679(次小生成树)模板
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Total Submissions:34617 Accepted: 12637 D ...
- Windows Server 创建环回网卡
1.以管理员身份运行cmd后,在cmd命令窗口中执行:hdwwiz 启动硬件添加向导. 2.在添加硬件向导中选择手动安装或自动搜索都可以.然后选择网络适配器. 3.选择网络适配器:厂商选择Micros ...
- 编写Shell脚本的最佳实践,规范一
随着写的SHELL程序越来越多,发现自己每次写都有不同的习惯或者定义了不同的东西,变量名定义得不一样,整个程序缩进不统一,没有注释等问题,等我回过头看这些程序的时候发现很麻烦.所以写了个shell代码 ...
- css字体投影
最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了.今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法.希望能对大 ...
- [洛谷1972][SDOI2009]HH的项链
题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...
- 数据库函数:sqlite3_exec() SQL语句
函数:sqlite3_exec(),称为便捷函数,封装了好多任务. 函数声明: int sqlite3_exec( sqlite * , const char * sql , sqlite_c ...
- 7.添加OpenStack计算服务
添加计算服务 安装和配置控制器节点 创建数据库 mysql -uroot -ptoyo123 CREATE DATABASE nova; GRANT ALL PRIVILEGES ON nova.* ...
- .apache.commons.io 源代码学习(一)
java的初学者,准备通读各种高水平源代码,提升能力. 为了避免自己的惰性,写博客. 版本:2.5 开发平台:netbeans. 今天是第一天,网上先看个例子:http://www.importnew ...
- laravel-u-editor工具栏语言切换的方法
更改/config/app.php/locale,可支持en,zh_CN,zh_TW,我们一般设为zh_CN
- Ionic Angular自动捕获错误 配置Angular2.x +
配置app.module.ts import { Pro } from '@ionic/pro'; // These are the imports required for the code bel ...