[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中左括号[]进 ...
随机推荐
- Command Pattern的简单介绍
Command pattern 的角色有:Command(抽象命令).ConcreteCommand(具体命令) .Invoker(传达命令者) .receiver(接收命令者)Client(客户类, ...
- 第3章 MFC框架程序剖析
参考: https://blog.csdn.net/u014162133/article/details/46573873 1. 2.MFC简介:MFC(Microsoft Foundation Cl ...
- android.useDeprecatedNdk=true
android.useDeprecatedNdk=true ndk{ moduleName "aa" abiFilter "armeabi-v7a" }
- 将本地访问ip映射成域名
通过修改以下地址 C:\WINDOWS\system32\drivers\etc\hosts 加进你自己的如: 192.168.1.101 www.helloworld.com 配置nginx代理u ...
- Centos 6.3防火墙端口放行
vi /etc/sysconfig/iptables #防火墙增加 -A INPUT -p tcp -m state --state NEW -m tcp --dport -j ACCEPT serv ...
- C# Log4Net使用示例
using log4net; using log4net.Config; using System; using System.IO; namespace Three.Logging { /// &l ...
- 控制台注入DLL代码
// zhuru.cpp : 定义控制台应用程序的入口点. #include "stdafx.h" #include <Windows.h> #define GameC ...
- 在16aspx.com上下了一个.net程序,怎么修改它的默认登录名和密码?
正常应该有个login.aspx文件,找到登入按钮事件,查看验证用户名密码事件,这个验证就有去搜索用户表,然后在这个用户表修改用户名密码就行了.不排除其他表有用用户名关联
- 计蒜客 28317.Growling Gears-一元二次方程的顶点公式 (Benelux Algorithm Programming Contest 2014 Final ACM-ICPC Asia Training League 暑假第一阶段第二场 G)
G. Growling Gears 传送门 此题为签到题,直接中学的数学知识点,一元二次方程的顶点公式(-b/2*a,(4*a*c-b*b)/4*a):直接就可以得到结果. 代码: #include& ...
- Codeforces Round #446 (Div. 2) C. Pride【】
C. Pride time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...