angular组件的生命周期

什么是生命周期

一个组件从生成到出现，然后最终销毁的过程，就是组件的生命周期。
组件生命周期的每个阶段都会触发对应的函数，利用这些函数可以在不同阶段完成对应的任务。

https://angular.cn/guide/components/lifecycle

环境准备

创建一个angular项目

使用ng n ngPro1 --standalone=false生成一个angular项目，项目创建后的文件布局如下：

项目自动生成的package.json文件的内容为：

{
  "name": "ng-pro1",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/platform-browser": "^18.1.0",
    "@angular/platform-browser-dynamic": "^18.1.0",
    "@angular/router": "^18.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.4",
    "@angular/cli": "^18.1.4",
    "@angular/compiler-cli": "^18.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"
  }
}

到项目目录下面，运行ng s -o启动项目：

将根组件app.component.html文件的内修改为：

创建一个新的组件

运行命令ng g c myc01创建一个新的组件：

将新生成的组件显示到根组件上：

生命周期演示

在根组件中切换显示/不显示组件app-myc01：

点击按钮，组件app-myc01在显示/不显示之间切换：

演示constructor、ngOnDestroy的执行

修改组件app-myc01的ts文件的代码，增加生命周期函数：

点击按钮：

再点击一次按钮：

演示ngOnInit的执行

演示constructor、ngOnInit、ngAfterContentInit、ngAfterViewInit的执行顺序

先不显示组件app-myc01：

点击按钮显示组件app-myc01：

演示ngAfterContentChecked、ngAfterViewChecked的执行

点击按钮，新增数据：

再点击按钮增加数据：