Angular5 组件生命周期详解-JavaScript中文网-JavaScript教程资源分享门户

在 Angular5 中，组件是我们最常用的构建界面的方式。组件本身是有生命周期的，针对不同的生命周期我们可以做一些操作，比如初始化数据、获取元素等。本文将详细讲解 Angular5 中组件的生命周期，以及如何利用其来优化我们的代码。

生命周期钩子

Angular5 中有八个生命周期钩子，分别是：

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

接下来我们将依次详细介绍每个生命周期钩子。

ngOnChanges

当 Angular5 检测到输入属性值发生了改变时，就会触发 ngOnChanges 钩子函数。这个钩子函数接收一个 SimpleChanges 类型的参数，包含了每个属性的当前值和之前的值。此时组件还没有完全初始化。

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div>Name: {{ name }}</div>
    <div>Age: {{ age }}</div>
  `
})
export class UserComponent implements OnChanges {
  @Input() name: string;
  @Input() age: number;

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

ngOnInit

ngOnInit 钩子函数会在组件初始化完成后调用，通常用来初始化组件的一些数据或服务。此时，所有的输入属性都已经赋值完成，但是模板还没有初始化完成。

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

@Component({
  selector: 'app-user',
  template: `
    <div>Name: {{ name }}</div>
    <div>Age: {{ age }}</div>
  `
})
export class UserComponent implements OnInit {
  name: string = 'Tony';
  age: number = 30;

  ngOnInit() {
    console.log('Component initialized');
  }
}

ngDoCheck

ngDoCheck 钩子函数会在每次 Angular5 视图更新前调用，用来检测数据变化，比如手动检测数组、对象是否发生变化。但是请注意，这个钩子函数会频繁地调用，因此需要注意性能问题。

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `...`
})
export class UserComponent implements DoCheck {
  user: { name: string, age: number } = { name: 'Tony', age: 30 };

  ngDoCheck() {
    if (this.user.name !== 'Tony') {
      console.log('User name has been changed');
    }
  }
}

ngAfterContentInit

ngAfterContentInit 钩子函数会在组件的内容初始化完成后调用，通常用来获取或操作组件的内容。

import { Component, AfterContentInit, ContentChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-article',
  template: `
    <div class="content" #content>
      <ng-content></ng-content>
    </div>
  `
})
export class ArticleComponent implements AfterContentInit {
  @ContentChild('content') content: ElementRef;

  ngAfterContentInit() {
    console.log(this.content.nativeElement.innerHTML);
  }
}

ngAfterContentChecked

ngAfterContentChecked 钩子函数会在组件的内容每次检查完后调用，通常用于检测组件的内容是否发生变化。

import { Component, AfterContentChecked } from '@angular/core';

@Component({
  selector: 'app-article',
  template: `...`
})
export class ArticleComponent implements AfterContentChecked {
  ngAfterContentChecked() {
    console.log('Component content checked');
  }
}

ngAfterViewInit

ngAfterViewInit 钩子函数会在组件的视图初始化完成后调用，通常用来获取或操作组件的视图元素。

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div #user>
      Hello, {{ name }}!
    </div>
  `
})
export class UserComponent implements AfterViewInit {
  @ViewChild('user') user: ElementRef;

  ngAfterViewInit() {
    console.log(this.user.nativeElement.innerHTML);
  }
}

ngAfterViewChecked

ngAfterViewChecked 钩子函数会在组件的视图每次检测完后调用，通常用来检测组件的视图是否发生变化。

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

@Component({
  selector: 'app-user',
  template: `...`
})
export class UserComponent implements AfterViewChecked {
  ngAfterViewChecked() {
    console.log('Component view checked');
  }
}

ngOnDestroy

ngOnDestroy 钩子函数会在组件销毁前调用，通常用于释放组件所占用的资源，比如取消订阅、清理定时器、释放内存等。

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-user',
  template: `...`
})
export class UserComponent implements OnDestroy {
  subscription: Subscription;

  constructor(...) {
    this.subscription = ...;
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

使用示例

有时候我们需要在组件的不同生命周期钩子中执行不同的操作，例如：在组件初始化完成后获取某个服务数据，在销毁前取消订阅等。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from './data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-user',
  template: `
    <div>Id: {{ id }}</div>
    <div>Name: {{ name }}</div>
  `
})
export class UserComponent implements OnInit, OnDestroy {
  id: number;
  name: string;
  subscription: Subscription;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.subscription = this.dataService.getUserData().subscribe(data => {
      this.id = data.id;
      this.name = data.name;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

总结

通过针对不同的生命周期钩子函数的使用，我们可以更好地管理组件的生命周期和优化代码效率。需要注意的是，在使用钩子函数的时候需要注意性能问题，避免频繁调用导致性能下降的问题。同时，也要注意使用时机，不同的钩子函数有不同的使用场景，需要结合具体情况进行选择。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a5fe97add4f0e0ffe9c89e

Angular5 组件生命周期详解