[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 查询条件,以获取不同 ...
随机推荐
- 使用solr的DIHandler 构建mysql大表全量索引,内存溢出问题的解决方法
solr官方给出的解决方式是: DataImportHandler is designed to stream row one-by-one. It passes a fetch size value ...
- go package的理解
golang package是基本的管理单元, 同一个package下面,可以有非常多的不同文件,只要 每个文件的头部 都有 如 "package xxx" 的相同name, ...
- webpack4 多页面,多环境配置,逐行解释
项目需求制作为新的app的分享页,故需要制作多页面应用,那既然app是新的,这边我们也要更新上,经过多方考察(度娘)下,综合了一些他人的优点并结合项目实况产生了此文. 本文为了解释详细,篇幅可能会较长 ...
- HDU1969 Pie(二分搜索)
题目大意是要办生日Party,有n个馅饼,有f个朋友.接下来是n个馅饼的半径.然后是分馅饼了, 注意咯自己也要,大家都要一样大,形状没什么要求,但都要是一整块的那种,也就是说不能从两个饼中 各割一小块 ...
- iOS8: 企业开发的终结?
iOS 8 的公布(如今是 iOS8.1),并非对全部人来说都是值得高兴的事情. 对那些使用企业部署(不经过商店公布)的 app 开发人员来说,又被苹果坑到了. 由于 iOS 8 的一个Bug.导致企 ...
- Android 一个异步SocketHelper
发送流程:首先定义一个缓冲池,发送数据时仅仅是将待发送的数据加入到缓冲池中,再由后台的工作线程从缓冲池中取得待发送数据进行发送.可能某些情况下在数据发送完成时需要做一些处理(比如写日志),便定义了一个 ...
- bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
- [Angular] Learn How To Use ng-template Inputs
For example, we have a modal component, it can config that using ng-template as a configurable templ ...
- UI组件之AdapterView及其子类关系,Adapter接口及事实上现类关系
AdapterView本身是一个抽象基类,它派生的的子类在使用方法上十分类似.AdapterView直接派生的三个子类:AbsListView.AbsSpinner,AdapterViewAnimat ...
- GDB如何调试没有符号表(未加-g选项的编译)的程序
/********************************************************************* * Author : Samson * Date ...