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

app HTML

1
2
3

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

app TS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

1	<p>nextchild works!</p>

4.nextchild TS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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);
}
}