在Angular中,父子组件之间的生命周期顺序如下:
ngOnChanges()
方法首先被调用,用于检测父组件属性的变化。ngOnInit()
方法被调用,用于初始化父组件。ngDoCheck()
方法被调用,用于检测父组件的变化。@Input()
),则子组件的ngOnChanges()
方法会被调用,用于检测子组件的输入属性的变化。ngOnInit()
方法被调用,用于初始化子组件。ngDoCheck()
方法被调用,用于检测子组件的变化。ngAfterContentInit()
方法被调用。ngAfterContentInit()
方法被调用。ngAfterViewInit()
方法被调用。ngAfterViewInit()
方法被调用。ngAfterViewChecked()
方法被调用,用于检测父组件的视图变化。ngAfterViewChecked()
方法被调用,用于检测子组件的视图变化。ngOnDestroy()
方法被调用。ngOnDestroy()
方法被调用。以下是一个包含父子组件的简单示例代码:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
message = 'Hello from parent!';
}
子组件:
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
{{ message }}
`
})
export class ChildComponent implements OnChanges {
@Input() message: string;
ngOnChanges(changes: SimpleChanges) {
console.log('ChildComponent - ngOnChanges', changes);
}
ngOnInit() {
console.log('ChildComponent - ngOnInit');
}
ngDoCheck() {
console.log('ChildComponent - ngDoCheck');
}
ngAfterContentInit() {
console.log('ChildComponent - ngAfterContentInit');
}
ngAfterViewInit() {
console.log('ChildComponent - ngAfterViewInit');
}
ngAfterViewChecked() {
console.log('ChildComponent - ngAfterViewChecked');
}
ngOnDestroy() {
console.log('ChildComponent - ngOnDestroy');
}
}
在控制台中,你将看到生命周期方法的调用顺序。