[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

最新文章

热门文章