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的更多相关文章

  1. angular ViewChild ContentChild 系列的查询参数

    官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...

  2. [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 ...

  3. [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 ...

  4. Angular ViewChild

    viewchild // 使用方法 git clone https://git.oschina.net/mumu-osc/learn-component.git cd learn-component ...

  5. [Angular] @ViewChild read custom directive and exportAs

    For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...

  6. [Angular] ViewChild 'read' option

    It is not clear in the Docs about {read: xx} option for @ViewChild. Based on the Source code, @ViewC ...

  7. [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 ...

  8. [Angular] Test component template

    Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...

  9. Angular ViewChild & ViewChildren

    基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...

随机推荐

  1. 使用solr的DIHandler 构建mysql大表全量索引,内存溢出问题的解决方法

    solr官方给出的解决方式是: DataImportHandler is designed to stream row one-by-one. It passes a fetch size value ...

  2. go package的理解

    golang package是基本的管理单元, 同一个package下面,可以有非常多的不同文件,只要 每个文件的头部    都有 如 "package xxx" 的相同name, ...

  3. webpack4 多页面,多环境配置,逐行解释

    项目需求制作为新的app的分享页,故需要制作多页面应用,那既然app是新的,这边我们也要更新上,经过多方考察(度娘)下,综合了一些他人的优点并结合项目实况产生了此文. 本文为了解释详细,篇幅可能会较长 ...

  4. HDU1969 Pie(二分搜索)

    题目大意是要办生日Party,有n个馅饼,有f个朋友.接下来是n个馅饼的半径.然后是分馅饼了, 注意咯自己也要,大家都要一样大,形状没什么要求,但都要是一整块的那种,也就是说不能从两个饼中 各割一小块 ...

  5. iOS8: 企业开发的终结?

    iOS 8 的公布(如今是 iOS8.1),并非对全部人来说都是值得高兴的事情. 对那些使用企业部署(不经过商店公布)的 app 开发人员来说,又被苹果坑到了. 由于 iOS 8 的一个Bug.导致企 ...

  6. Android 一个异步SocketHelper

    发送流程:首先定义一个缓冲池,发送数据时仅仅是将待发送的数据加入到缓冲池中,再由后台的工作线程从缓冲池中取得待发送数据进行发送.可能某些情况下在数据发送完成时需要做一些处理(比如写日志),便定义了一个 ...

  7. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

  8. [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 ...

  9. UI组件之AdapterView及其子类关系,Adapter接口及事实上现类关系

    AdapterView本身是一个抽象基类,它派生的的子类在使用方法上十分类似.AdapterView直接派生的三个子类:AbsListView.AbsSpinner,AdapterViewAnimat ...

  10. GDB如何调试没有符号表(未加-g选项的编译)的程序

    /********************************************************************* * Author  : Samson * Date    ...