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. diff命令具体解释

    diff命令參数: diff - 找出两个文件的不同点 总览 diff [选项] 源文件 目标文件 以下是 GNU所接受的 diff 的全部选项的概要. 大多数的选项有两个同样的名字,一个是单个的跟在 ...

  2. php的数据类型和变量的作用域

    1)php支持例如以下所看到的的基本数据类型: Integer(整数).Float(浮点数).String(字符串).Boolean(布尔值).Array(数组).Object(对象),此外还有两个特 ...

  3. get_browser()用法

    get_browser()用法 get_browser()函数是用来分析USER_AGENT的,它的执行方法是自动获取客户端的USER_AGENT,然后调用browscap.ini库进行分析得到结果 ...

  4. menuconfig_kconfig

    这一节的主要内容: Menuconfig的操作 Kconfig和.config文件 Linux内核配置裁剪实验 linux编译器通过.config文件确认哪些代码编译进内核,哪些被裁减掉 menuco ...

  5. COdeVS——T 1082 线段树练习 3 (分块练习)

    http://codevs.cn/problem/1082/ 时间限制: 3 s  空间限制: 128000 KB  题目等级 : 大师 Master 题解       题目描述 Descriptio ...

  6. (转)看懂类图——UML类图基础

    类图 要学懂设计模式,就需要先看得懂类图,类与类之间的关系是学习设计模式的基础,而在软件工程中,类与类之间的关系是通过UML中的类图来体现. 这篇笔记包含的不会是类图的所有东西,包含的只是各个类之间的 ...

  7. python课程:python3的数字与字符串

    一下是基于python2的教程的 python中有 多个数据类型,和,两种字符串类型 他们都是不可变的.

  8. ganglia错误解决

    1.      运行: 解决: 这时重新启动gmetad,输入命令: service gmetad stop 显示: Shutting down GANGLIA gmetad:             ...

  9. QT5.5

    QT创建空项目时,会有报错“无法解析的外部符号”,方法是在 .pro文件中添加 以下,即可QT+=core gui widgets

  10. Android5.0(Lollipop) BLE蓝牙4.0+浅析demo连接(三)

    作者:Bgwan链接:https://zhuanlan.zhihu.com/p/23363591来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Android5.0(L ...