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. VSM and VEM Modules

    Information About Modules Cisco Nexus 1000V manages a data center defined by a VirtualCenter. Each s ...

  2. Linux Mint---shutter截图软件

    shutter 可以说是linux下最好的截图软件了,默认安装好后不能编辑截图,解决方法如下: 1-关闭shutter 2-sudo apt-get install shutter libgoo-ca ...

  3. scrapy递归下载网站

    # encoding: utf-8 import os import re import subprocess import sys import chardet import scrapy fro ...

  4. 多目录,多可执行文件的Makfile的编写

    1.前言 在目前的工作中,我遇到这样的一个工作情景,可以认为我要开发一个库,这个库的有多个模块,每个模块的.c放到src中,.h放到include中,这应该是个标准做法. drwxr-xr-x. ro ...

  5. 【dlib代码解读】人脸检测器的训练【转】

    转自:http://blog.csdn.net/elaine_bao/article/details/53046542 版权声明:本文为博主原创文章,转载请注明.   目录(?)[-] 综述 代码解读 ...

  6. 有关cookie的内容

    包括: Cookie概述(Cookie的存放,有效期和作用域) Cookie操作(保存Cookie,读取Cookie,Cookie的生命周期) Cookie工作原理(Cookie与会话跟踪,Cooki ...

  7. JSON的相关内容

    包括: JSON概述, JSON语法规则, 使用JSON(JSON对象,JSON数组,JSON文档与对象的转换) JSON应用 额外内容(PHP输出JSON数据,解析JSON字符串,客户端如何使用服务 ...

  8. SQL Server分页语句ROW_NUMBER,读取第4页数据,每页10条

    SQL Server分页语句ROW_NUMBER,读取第4页数据,每页10条 SELECT Id,[Title],[Content],[Image] FROM ( SELECT ROW_NUMBER( ...

  9. python实现并发获取html的几种方式

    1.线程池 from concurrent.futures import ThreadPoolExecutor import requests from fake_useragent import U ...

  10. SQL Server 预编译执行SQLs

    问题描述: MVC5项目,利用执行sql的方式获取数据,但是在利用预编译执行的时候报错了,字段XXXwhich was not supplied. 其实就是这个参数传了个null导致的.在传参数之前做 ...