AfterViewInit、AfterViewChecked与父组件调用子组件的方法

app HTML

<app-nextchild #child1></app-nextchild>
<app-nextchild #child2></app-nextchild>
<button (click)="child2.helloGreeting('Smith')">调用子组件方法</button>

app TS

import {AfterViewChecked, AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {NextchildComponent} from './nextchild/nextchild.component';

// @ts-ignore
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked{
  greeting = 'Hello';
  user: {name: string} = {name: 'Jenny'};

  @ViewChild('child1') child1: NextchildComponent;

  constructor() {
  }

  // tslint:disable-next-line:use-lifecycle-interface
  ngOnInit(): void {
    setInterval(() => {
      this.child1.helloGreeting('小青');
    }, 5000);
  }

  ngAfterViewChecked(): void {
    console.log('父组件的视图变更检测完成');
  }

  ngAfterViewInit(): void {
    console.log('父组件装配完成');
  }
}

3.nextChild HTML

<p>nextchild works!</p>

4.nextchild TS

import {AfterViewChecked, AfterViewInit, Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-nextchild',
  templateUrl: './nextchild.component.html',
  styleUrls: ['./nextchild.component.css']
})
export class NextchildComponent implements OnInit, AfterViewInit, AfterViewChecked {

  constructor() { }

  ngAfterViewChecked(): void {
        console.log('子组件的视图变更检测完成');
    }

  ngAfterViewInit(): void {
    console.log('子组件装配完成');
    }

  ngOnInit(): void {
  }

  public helloGreeting(name: string): void{
    console.log('Hello ' + name);
  }
}