[Angular] @ViewChild and template #refs to get Element Ref
We can use @ViewChild with component:
@ViewChild(AuthMessageComponent) message: AuthMessageComponent;
//....
ngAfterContentInit() {
if (this.message) {
this.message.days = ;
}
}
By doing this, we actually can access component's prop and events.
If we want to get component DOM node, what we can do is using template ref.
<input type="email" name="email" ngModel #email>
@ViewChild('email') email: ElementRef;
// ....
ngAfterViewInit() {
console.log(this.email); // ElementRef
}

[Angular] @ViewChild and template #refs to get Element Ref的更多相关文章
- angular ViewChild ContentChild 系列的查询参数
官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...
- [Angular 2] Create template with Params
Angular 2 templates have a special let syntax that allows you to define and pass a context when they ...
- [Angular 2] Passing Template Input Values to Reducers
Angular 2 allows you to pass values from inputs simply by referencing them in the template and passi ...
- Angular ViewChild
viewchild // 使用方法 git clone https://git.oschina.net/mumu-osc/learn-component.git cd learn-component ...
- [Angular] @ViewChild read custom directive and exportAs
For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...
- [Angular] ViewChild 'read' option
It is not clear in the Docs about {read: xx} option for @ViewChild. Based on the Source code, @ViewC ...
- [Angular 2] Share Template Content In Another Template With Content Projection <ng-content>
Angular 1 provided a mechanism to place content from your template inside of another template called ...
- [Angular] Test component template
Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...
- Angular ViewChild & ViewChildren
基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...
随机推荐
- 字串乱序 PHP&JS
<?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...
- ProgressBar-style属性分析
首先我们看下framework下关于进度条的style定义,如下 <style name="Widget.ProgressBar"> <item name=&qu ...
- ThinkPHP5.0---方法异常格式
public function test(){ try{ // 获取到ThinkPHP的内置异常时,直接向上抛出,交给ThinkPHP处理 }catch (\think\Exception\HttpR ...
- JQ的核心原理以及扩展等
jQuery核心原理 定义原型扩展和工具包扩展的方法 JQ的API中文速查: http://jquery.cuishifeng.cn/ JQ的原理:http://www.cnblogs.com/Sca ...
- [Angular] The Select DOM Event and Enabling Text Copy
When we "Tab" into a input field, we want to select all the content, if we start typing, i ...
- C++卷积神经网络实例:tiny_cnn代码具体解释(8)——partial_connected_layer层结构类分析(上)
在之前的博文中我们已经将顶层的网络结构都介绍完毕,包括卷积层.下採样层.全连接层,在这篇博文中主要有两个任务.一是总体贯通一下卷积神经网络在对图像进行卷积处理的整个流程,二是继续我们的类分析.这次须要 ...
- NLP系列(1)_从破译外星人文字浅谈自然语言处理的基础
作者:龙心尘 &&寒小阳 时间:2016年1月. 出处: http://blog.csdn.net/longxinchen_ml/article/details/50543337, h ...
- js闭包中的this(匿名函数中的this指向的是windows)
js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...
- Delegates, Events and Singletons with Unity3D – C#
在这里我将演示怎样创建代表. 事件和Singletons 在一起工作. 本教程为 Unity3D 编写. 我想知道这为什么?作为一个年轻的自学程序猿,我常常发现自己写tons 和布尔的语句,以确 ...
- thinkphp3.1课程 1-1 为什么thinkphp在开发好后需要关掉开发模式
thinkphp3.1课程 1-1 为什么thinkphp在开发好后需要关掉开发模式 一.总结 一句话总结:因为调试模式中会记录你所有的调试信息,比如a调用b,b调用c,c调用d,比如你从哪个数据库取 ...