[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 8] Custom Route Preloading with ngx-quicklink and Angular
- [Angular 2] Generate and Render Angular 2 Template Elements in a Component
- [Angular 2] Handling Clicks and Intervals Together with Merge
- [Angular] Service Worker Version Management
- [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor
- [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
- [Angular] AuthService and AngularFire integration
- [Angular] The Select DOM Event and Enabling Text Copy
- [Angular Unit Testing] Testing Services with dependencies
- [Angular] Updating and resetting FormGroups and FormControls
- [Angular] Difference between ngAfterViewInit and ngAfterContentInit
- [Angular Directive] 2. Add Inputs to Angular 2 Directives
- [Angular 2] Using the @Inject decorator
- [Angular 2] ng-class and Encapsulated Component Styles
- [AngularJS] Consistency between ui-router states and Angular directives
- [Angular-Scaled Web] 6. Navigating between states with ui-router
- 三种Web前端框架比较与介绍--Vue, react, angular
- Angular 依赖注入机制实现原理的深入介绍
- 从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
- Angular Schematics 学习笔记
- Angular依赖注入官方文档的学习笔记
- Angular FormBuilder的工作原理
- Angular应用的入口
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定