zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    windwos8.1英文版安装SQL2008 R2中断停止的解决方案
    indwows8.1 英文版64位安装数据库时出现The ENU localization is not supported by this SQL Server media
    Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds
    SQL数据附加问题
    eclipse,myeclipse中集合svn的方法
    JAVA SSH 框架介绍
    SSH框架-相关知识点
    SuperMapRealSpace Heading Tilt Roll的理解
    SuperMap iserver manage不能访问本地目的(IE9)
    Myeclipse中js文件中的乱码处理
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6414657.html
Copyright © 2011-2022 走看看