[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 ...
随机推荐
- VA对于开发QT是神器,VA自动补全QT
我怎么就忘了,VA也可以适用于VS下开发QT程序.其中QT的头文件自己增加,主要是: C:\Qt\4.8.6_2008\include 但还有一些特殊类不认识,所以还得继续增加: C:\Qt\4.8. ...
- 【例题 7-13 UVA-1374】Power Calculus
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 结论:每次只用新生成的数字就好了. 然后就是IDA*了. 迭代深搜+剪枝. [代码] /* 1.Shoud it use long ...
- WP8日历(含农历)APP
WP8日历(含农历)APP WP8日历(含农历)APP UI XAML(部分) <phone:PhoneApplicationPage xmlns:CustomControl="clr ...
- 【Java并发编程实战】-----“J.U.C”:CLH队列锁
在前面介绍的几篇博客中总是提到CLH队列,在AQS中CLH队列是维护一组线程的严格依照FIFO的队列.他可以确保无饥饿,严格的先来先服务的公平性.下图是CLH队列节点的示意图: 在CLH队列的节点QN ...
- Docker---(2)docker pull 下来的镜像存储在哪里
原文:Docker---(2)docker pull 下来的镜像存储在哪里 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn. ...
- 20160206.CCPP体系具体解释(0016天)
代码片段(01):.指针.c+02.间接赋值.c 内容概要:内存 ///01.指针 #include <stdio.h> #include <stdlib.h> //01.取地 ...
- docker基础(二)
1.base镜像的特点 (1)不依赖于其他的镜像 (2)其它的可以通过它位基础作为容器的底层 2.在下载镜像的时候,只有几百M,但是安装一个Ubuntu虚拟机的镜像就比较大,首先会想到图形化界面,其实 ...
- 自定义npm包——typeScript版本
前言 这篇文章是在我之前的文章 [自定义npm包的创建.发布.更新和撤销] 的基础上做的扩展,主要是针对如何创建以及发布一个typeScript语言的npm包. 大纲 1.创建关于typeScript ...
- spark提交应用的方法(spark-submit)
参考自:https://spark.apache.org/docs/latest/submitting-applications.html 常见的语法: ./bin/spark-submit \ ...
- Android系统开发(5)——Eclipse for C/C++
一.下载JDK 官方下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二 ...