[Angular] @ContentChild and ngAfterContentInit
@ContentChild normally works with ngAfterContentInit lifecycle.
@ContentChild is used for looking into child component's props.
For example, we a app component:
<auth-form
(submitted)="loginUser($event)">
<h3>Login</h3>
<auth-remember
(checked)="rememberUser($event)">
</auth-remember>
<button type="submit">
Login
</button>
</auth-form>
Inside it define a 'auth-form' component, and for auth-form component it has 'h3', 'auth-remember' and 'button' component as children.
Auth-form:
<div>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
<ng-content select="h3"></ng-content>
<label>
Email address
<input type="email" name="email" ngModel>
</label>
<label>
Password
<input type="password" name="password" ngModel>
</label>
<ng-content select="auth-remember"></ng-content>
<ng-content select="button"></ng-content>
</form>
</div>
Inside auth-form, it use <ng-content> (content projection) to show 'h3, button & auth-remember' component. So what we want to do here is "inside auth-form component, listen to auth-remember's checked event, using its value to toggle a message div".
Add a message div:
<div>
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
<ng-content select="h3"></ng-content>
<label>
Email address
<input type="email" name="email" ngModel>
</label>
<label>
Password
<input type="password" name="password" ngModel>
</label>
<ng-content select="auth-remember"></ng-content>
<div *ngIf="showMessage">You account will be kept for 30 days</div>
<ng-content select="button"></ng-content>
</form>
</div>
Using @ContentChild to get the component object.
import { Component, Output, EventEmitter, AfterContentInit, ContentChild } from '@angular/core'; import { User } from './auth-form.interface';
import {AuthRememberComponent} from './auth-remember.component'; @Component({
selector: 'auth-form',
template: `
...
`
})
export class AuthFormComponent implements AfterContentInit{
showMessage: boolean; @ContentChild(AuthRememberComponent) remember: AuthRememberComponent; @Output() submitted: EventEmitter<User> = new EventEmitter<User>(); onSubmit(value: User) {
this.submitted.emit(value);
} ngAfterContentInit(): void {
if(this.remember) {
this.remember.checked.subscribe((checked: boolean) => {
this.showMessage = checked;
})
}
} }
If we check 'this.remember':
We can subscribe 'this.remember.checked' to get whether 'auth-remember' is checeked or not, and assign the value to 'showMessage' var.
@ContentChild is really powerful, it can get any props on the child component.
For exmaple, we can add an @Input value and a private prop on to the auth-remember component.
import { Component, Output, EventEmitter, Input } from '@angular/core'; @Component({
selector: 'auth-remember',
template: `
<label>
<input type="checkbox" (change)="onChecked($event.target.checked)">
Keep me logged in
</label>
`
})
export class AuthRememberComponent { @Output() checked: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() role: string; myName: string = "Auth-remember"; onChecked(value: boolean) {
this.checked.emit(value);
}
}
And from the console log, we can see, we get everthing about the auth-remember component.
[Angular] @ContentChild and ngAfterContentInit的更多相关文章
- Angular ContentChild
contentchild // 使用方法 git clone https://git.oschina.net/mumu-osc/learn-component.git cd learn-compone ...
- [Angular] @ContentChild with Directive ref
For example you have a component, which take a trasclude input element: <au-fa-input id="pas ...
- ViewChild与ContentChild的联系和区别
原文 https://www.jianshu.com/p/5ab619e576ea 大纲 1.认识ViewChild 2.认识ContentChild 3.ViewChild与ContentChild ...
- [Angular] Write Compound Components with Angular’s ContentChild
Allow the user to control the view of the toggle component. Break the toggle component up into multi ...
- [Angular] Difference between ngAfterViewInit and ngAfterContentInit
Content is what is passed as children. View is the template of the current component. The view is in ...
- [Angular] Difference between ViewChild and ContentChild
*The children element which are located inside of its template of a component are called *view child ...
- angular ViewChild ContentChild 系列的查询参数
官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...
- Angular开发实践(三):剖析Angular Component
Web Component 在介绍Angular Component之前,我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式,提出Web Component的标准. ...
- angular5 @viewChild @ContentChild ElementRef renderer2
@viewChild 作用一:选择组件内节点 <!--视图 --> <div #mydiv><input></div> // 选择 @ViewChild ...
随机推荐
- windows下配置mycat与常见问题解决
mycat官网:http://www.mycat.org.cn/ wiki:https://github.com/MyCATApache/Mycat-Server/wiki MyCat使用Mysql的 ...
- android 蓝牙各种UUID
ServiceDiscoveryServerServiceClassID_UUID = '{00001000-0000-1000-8000-00805F9B34FB}' BrowseGroupDesc ...
- CNTK 搞深度学习-1
CNTK 搞深度学习 Computational Network Toolkit (CNTK) 是微软出品的开源深度学习工具包.本文介绍CNTK的基本内容,如何写CNTK的网络定义语言,以及跑通一个简 ...
- element ui源码解析 -- button篇
要看源码就得从最简单的开始,button够简单的了,就从他开始吧. 安装依赖后源码目录在:node_modules/element-ui/packages中,可以看到这里的文件夹命名是不是很熟悉,就是 ...
- JVM学习:方法重载的优先级
重载:方法名一致,参数长度或者类型不一致. 先放总结,下面为例子 参数具有继承.实现关系,优先考虑子类: 在不考虑对基本类型自动装拆箱(auto-boxing,auto-unboxing),以及可变长 ...
- ios移动旋转缩放动画
//移动旋转动画效果 CATransform3D rotate = CATransform3DMakeRotation(70.0 * M_PI / 180.0, 0.0, 0.0, 1.0); CAT ...
- php实现字符串替换
php实现字符串替换 一.总结 二.php实现字符串替换 代码一: //字符串替换 function str_replace($substr , $newsubstr, $str) { $m = st ...
- 22、在Ubuntu 14.0上使用韦东山IP2977测试总结(未成功)
1. 去www.kernel.org下载同版本的内核(与Ubuntu 14.0) 解压后把drivers/media/video/uvc目录取出(发现我的3.13版本的在drivers\media\u ...
- 1、第一课 register_chrdev和register_chrdev_region 创建知识
1. register_chrdev注册字符设备后,有0-256个子设备可用,若major==0,则内核动态申请主设备号.static inline int register_chrdev(unsig ...
- 【t041】距离之和
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在一条数轴上有N头牛在不同的位置上,每头牛都计算到其它各头牛的距离.求这n*(n-1)个距离的总和. ...