Angular中的生命周期-猿码集

1. 生命周期介绍

在Angular中，每个组件和指令都有自己的生命周期。这个生命周期包含了从组件被创建到组件被销毁的一系列过程，包括了初始化、变化检测、销毁等过程。开发人员可以通过实现生命周期钩子函数，在不同的生命周期阶段执行不同的操作。

总的来说，Angular中的生命周期可以分为两大类：

组件生命周期：用于控制组件的创建、更新和销毁。

指令生命周期：用于控制指令的生命周期。

接下来我们将详细介绍Angular中的生命周期。

2. 组件生命周期

组件生命周期包含了以下几个阶段：

ngOnChanges()

ngOnInit()

ngDoCheck()

ngAfterContentInit()

ngAfterContentChecked()

ngAfterViewInit()

ngAfterViewChecked()

ngOnDestroy()

2.1. ngOnChanges()

ngOnChanges()是组件生命周期中第一个被调用的函数。它主要用于在Angular检测到组件属性变化时执行一些操作。该函数的参数包含了发生变化的属性的现在值和之前的值。


@Component({
  selector: 'app-sample',
  template: `
{{name}}
`
})
export class SampleComponent implements OnChanges {
  @Input() name: string;
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }  
}

在上面的代码中，当组件的name属性发生变化时，ngOnChanges()函数会被调用。它接受一个SimpleChanges类型的参数，这个参数包含了发生变化的属性的现在值和之前的值。我们可以在这个函数中执行一些操作，比如记录属性变化、更新界面等。

2.2. ngOnInit()

ngOnInit()是组件生命周期中的第二个函数，它会在组件初始化时被调用。在这个函数中，我们可以初始化组件的一些属性或者执行一些操作。


@Component({
  selector: 'app-sample',
  template: `
{{name}}
`
})
export class SampleComponent implements OnInit {
  @Input() name: string;
  ngOnInit() {
    console.log('Component initialized');
  }  
}

在上面的代码中，我们在ngOnInit()函数中输出了一条日志。当组件初始化时，这个函数会被调用。

2.3. ngDoCheck()

ngDoCheck()是组件生命周期中的第三个函数，它会在每个变更检测周期中被调用。它主要用于执行自定义的变更检测逻辑。


@Component({
  selector: 'app-sample',
  template: `
{{name}}
`
})
export class SampleComponent implements DoCheck {
  @Input() name: string;
  ngDoCheck() {
    console.log('Custom change detection logic here');
  }  
}

在上面的代码中，我们在ngDoCheck()函数中输出了一条日志。在每个变更检测周期中，这个函数会被调用执行自定义的变更检测逻辑。

2.4. ngAfterContentInit()

ngAfterContentInit()是组件生命周期中的第四个函数。它在组件的内容初始化之后被调用，该函数中可以执行一些只需一次执行的操作。


@Component({
  selector: 'app-sample',
  template: `
{{name}}
`
})
export class SampleComponent implements AfterContentInit {
  @ContentChild('sample') sample: ElementRef;
  ngAfterContentInit() {
    console.log('Content initialized');
  }  
}

在上面的代码中，我们在ngAfterContentInit()函数中输出了一条日志。在组件的内容初始化之后，这个函数会被调用，可以执行一些只需一次执行的操作。

2.5. ngAfterContentChecked()

ngAfterContentChecked()是组件生命周期中的第五个函数。它会在每个变更检测周期中被调用，用于检测组件内容的变化。


@Component({
  selector: 'app-sample',
  template: `
{{name}}
`
})
export class SampleComponent implements AfterContentChecked {
  @ContentChild('sample') sample: ElementRef;
  ngAfterContentChecked() {
    console.log('Content checked');
  }  
}

在上面的代码中，我们在ngAfterContentChecked()函数中输出了一条日志。在每个变更检测周期中，这个函数会被调用，用于检测组件内容的变化。

2.6. ngAfterViewInit()

ngAfterViewInit()是组件生命周期中的第六个函数。它在组件的视图初始化之后被调用，该函数中可以执行一些只需一次执行的操作。


@Component({
  selector: 'app-sample',
  template: `
{{name}}
`
})
export class SampleComponent implements AfterViewInit {
  @ViewChild('sample') sample: ElementRef;
  ngAfterViewInit() {
    console.log('View initialized');
  }  
}

在上面的代码中，我们在ngAfterViewInit()函数中输出了一条日志。在组件的视图初始化之后，这个函数会被调用，可以执行一些只需一次执行的操作。

2.7. ngAfterViewChecked()

ngAfterViewChecked()是组件生命周期中的第七个函数。它会在每个变更检测周期中被调用，用于检测组件视图的变化。


@Component({
  selector: 'app-sample',
  template: `
{{name}}
`
})
export class SampleComponent implements AfterViewChecked {
  @ViewChild('sample') sample: ElementRef;
  ngAfterViewChecked() {
    console.log('View checked');
  }  
}

在上面的代码中，我们在ngAfterViewChecked()函数中输出了一条日志。在每个变更检测周期中，这个函数会被调用，用于检测组件视图的变化。

2.8. ngOnDestroy()

ngOnDestroy()是组件生命周期中的最后一个函数。它在组件销毁之前被调用，用于做一些清理操作、取消订阅等工作。


@Component({
  selector: 'app-sample',
  template: `
{{name}}
`
})
export class SampleComponent implements OnDestroy {
  @ViewChild('sample') sample: ElementRef;
  ngOnDestroy() {
    console.log('Component destroyed');
  }  
}

在上面的代码中，我们在ngOnDestroy()函数中输出了一条日志。在组件销毁之前，这个函数会被调用，用于做一些清理操作等工作。

3. 指令生命周期

指令生命周期包含了以下几个阶段：