Angular-07:组件生命周期

三个阶段:

  • ① 挂载阶段
    • 1.1 constructor
    • 1.2 ngOnInit
  • ② 更新阶段
    • 2.1 ngOnChanges
    • 2.2 ngAfterViewInit
    • 2.3 ngAfterContentInit
    • 2.4 ngDoCheck
  • ③ 卸载阶段
    • 3.1 onOnDestroy
  • ④ 在组件中添加所有方法并打印

该表按照执行顺序编写

编号函数名实现名说明
1constructorconstructor接收服务实例化对象
2ngOnChangesOnChanges当输入属性值发生变化时执行
3ngOnInitOnInit在首次接收到输入属性值后执行
4ngDoCheckDoCheck主要用于调试,每次变化检测发生时调用
5ngAfterContentInitAfterContentInit当内容投影初始渲染完成后调用
6ngAfterContentCheckedAfterContentChecked内容投影更新完成后执行
7ngAfterViewInitAfterViewInit当组件视图渲染完成后调用
8ngAfterViewCheckedAfterViewChecked组件视图更新完成后执行
9ngOnDestroyOnDestroy组件被销毁之前调用

① 挂载阶段

该阶段生命周期函数只执行一次,数据更新时不再执行。

1.1 constructor

  1. 不是组件生命周期函数,是组件类的构造函数,但是他属于挂载阶段
  2. 建议只接收服务实例化对象,不要干其他的事
  3. angular实例化组件类时执行,可以用来接收angular注入的服务实例对象。

例: 创建一个服务“TestService”, 在组件中注入服务并在constructor中打印查看结果

TestService:

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class TestService {testTip = "test,来自服务的消息";constructor() { }}
export class OtherComponent implements OnInit{constructor(private TestService: TestService) {console.log("this.TestService--", this.TestService.testTip);  // test,来自服务的消息}
}

结果:
在这里插入图片描述


1.2 ngOnInit

在首次接收到输入属性后执行,也用来做初始化任务执行

例: 创建一个子组件,在父组件中传递给子组件一个输入值,在子组件中打印查看结果。

在父组件中的子组件标签定义好属性

<!-- 父组件模板 --><app-son [sonName]="'王二小'"></app-son>

子组件接收该属性值并打印

// 子组件类
export class SonComponent implements OnInit {@Input() sonName: string = '';constructor() { }ngOnInit() {console.log("sonName", this.sonName);   // 王二小}}

结果:
在这里插入图片描述


② 更新阶段

2.1 ngOnChanges

  1. 输入属性发生变化时执行,初始设置时也会执行一次。响应组件输入值发生变化时出发。(顺序优先于ngOnInit)
  2. 不论有多少个输入属性同时变化,该钩子只会执行一次,变化的值会同时存储在参数中。(多个输入属性一起传递,钩子函数会同时处理)
  3. 参数的类型为SimpleChanges,子属性类型为SimpleChange。
  4. 对于基本数据类型来说,只要值发生改变就可以被该函数检测到。
  5. 对于引用数据类型来说,可以检测从一个对象变成另一个对象(整个对象重新赋值,引用地址发生了变化),但是检测不到同一个对象中属性值的变化(某个属性值被改变),但是不影响组件模板更新数据。(钩子函数捕捉不到改变,但是在组件模板中会变化)

例1:基本数据类型值变化

  1. 给子组件传递一个基本数据类型属性 sonName,值为:王二小。
  2. 定义一个按钮,点击按钮时将该值改为:李四。
<!-- 父组件 -->
<app-son [sonName]="sonName"></app-son>
<button (click)="changeName()">换个名字</button>
// 父组件类sonName: string = '王二小';changeName() {this.sonName = "李四";}

在子组件类中接收该值,并在ngOnChanges方法中添加打印,查看该值的变化

// 子组件类@Input() sonName: string;ngOnChanges(changes: SimpleChanges): void {console.log("changes", changes);console.log("sonName", this.sonName);}
  1. 基本数据类型的值改变可以在该方法中被检测到
  2. SimpleChanges对象:包含当前值和变化前的值。输入属性值发生变化时触发。
    在这里插入图片描述

例2:引用数据类型对象属性变化

  1. 给子组件传递一个对象 sonInfo,值为:{ name: “王二小”, age: 18 }。
  2. 定义一个按钮,点击按钮时将该对象的属性改变。
<!-- 父组件模板 --><app-son [sonInfo]="sonInfo"></app-son>
<button (click)="changeInfo()">换个信息</button>

在父组件类中改变该对象的属性

// 父组件类sonInfo = { name: "王二小", age: 18 };changeInfo() {this.sonInfo.name = "李四";this.sonInfo.age = 3;}
  1. 在子组件类中接收该对象sonInfo,并在ngOnChanges中添加打印
// 子组件类@Input() sonInfo: Object;ngOnChanges(changes: SimpleChanges): void {console.log("changes", changes);console.log("sonInfo", this.sonInfo);}

在子组件模板中将该对象显示

<!-- 子组件模板 --><p>{{sonInfo | json}}</p>

最终结果:

  1. 初始化的时候ngOnChanges方法会打印接收的input对象。
  2. 在父组件中点击按钮改变对象属性时,该对象传递到子组件中。
  3. 由于值改变了对象属性,ngOnChanges方法无法检测到该对象的变化,不会输出打印。
  4. 但是在子组件模板中可以看到,该对象已经由最初的 “王二小” 变为了 “李四” 。在这里插入图片描述

例3:引用数据类型引用地址变化

  1. 同例2逻辑,这次在父组件传递给子组件值时改变对象赋值方式。
  2. 在点击按钮时,在父组件中对象重新赋值。(改变对象的引用地址)
// 父组件组件类
sonInfo = { name: "王二小", age: 18 };changeInfo() {this.sonInfo = { name: "李四", age: 3 };}

最终结果:
每次点击按钮,ngOnChanges都会检测到该对象的变化
在这里插入图片描述


2.2 ngAfterViewInit

  1. 组件视图渲染完成后调用。
  2. angular创建完成组件视图及其子视图之后。

2.3 ngAfterContentInit

  1. 当内容投影初始渲染完成调用。
  2. 组件中使用了将内容嵌入组件视图后会调用,在第一次ngDoCheck执行后调用,且只执行一次。

2.4 ngDoCheck

  1. 用于变化检测,该钩子方法会在每次变化检测发生时调用。
  2. 不管数据值是否发生了变化,都会被调用,该钩子方法需慎用。该方法内不能写复杂代码,会影响性能。
  3. 例如鼠标移动事件,变化检测会频繁触发,该钩子方法会频繁调用。
  4. ngDoCheck和ngOnChange不建议同时使用。

③ 卸载阶段

3.1 onOnDestroy

  1. 什么是卸载?
    组件所对应的dom元素被移除就是卸载。避免发生内存泄漏等问题。
  2. 当组件被销毁之前调用,用于清理操作。
  3. 一个经典应用场景,从a页面b页面时,a页面所对应的组件就会被卸载掉。
  4. 需要在该函数内处理:已订阅的观察者事件清理,定时器清理,绑定的dom清理(一些不会被垃圾回收器自动回收的资源)

④ 在组件中添加所有方法并打印

在组件中,所有方法的无序的排列(未按照执行顺序排列)。因为每个方法有自己的特有的执行条件,并非按照先后顺序执行。

@Component({selector: 'app-son',templateUrl: './son.component.html',styleUrls: ['./son.component.css']
})
export class SonComponent implements OnInit, AfterViewInit, AfterContentInit, OnChanges, DoCheck, AfterContentChecked, AfterViewChecked, OnDestroy {constructor() {console.log("constructor");}ngAfterViewChecked(): void {console.log("ngAfterViewChecked");}ngOnDestroy(): void {console.log("ngOnDestroy");}ngAfterContentChecked(): void {console.log("ngAfterContentChecked");}ngDoCheck(): void {console.log("ngDoCheck");}ngOnChanges(changes: SimpleChanges): void {console.log("ngOnChanges");}ngAfterContentInit(): void {console.log("ngAfterContentInit");}ngOnInit() {console.log("ngOnInit");}ngAfterViewInit(): void {console.log("ngAfterViewInit");}}

执行结果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/133020.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp自定义权限菜单,动态tabbar

已封装为组件&#xff0c;亲测4个菜单项目可以切换&#xff0c; 以下为示例&#xff0c;根据Storage 中 userType 的 值&#xff0c;判断权限菜单 <template><view class"tab-bar pb10"><view class"tabli" v-for"(tab, index) in ta…

叁[3],感兴趣区域ROI

1&#xff0c;简介 ROI&#xff0c;感兴趣区域&#xff08;region of interest)&#xff0c;截取图像 2&#xff0c;获取方法 方法1&#xff1a;使用Rect cv::Mat srccv::imread("*.bmp");//读取原图 cv::Mat matROI src(cv::Rect(100,200,50,100));//截取原图&am…

C—结构体,动态分配内存存储字符串

#define _CRT_SECURE_NO_WARNINGS #pragma warning(disable:4996)&#xff1b; //上面这一行必须加&#xff0c;否则strcpy不能用#include<stdio.h> #include<string.h>typedef struct LNode {char* name;int age; }LNode,*LinkNode;int main() {LNode node;LinkNo…

DirectX3D 虚拟现实项目 三维物体的光照及着色(五个不同着色效果的旋转茶壶)

文章目录 任务要求原始代码CPP文件代码着色器文件代码 效果展示 任务要求 本篇文章是中国农业大学虚拟现实课程的一次作业内容&#xff0c;需要对五个茶壶模型使用不同的光照进行着色和渲染&#xff0c;然后旋转展示。 本人的代码也是在其他人的代码的基础上修改来的&#xf…

centos获取服务器公网ip

查看公网IP 用下面几个命令&#xff1a; #curl ifconfig.me #curl icanhazip.com #curl cip.cc

前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架

文章目录 Vue-cliVue项目-创建Vue项目-目录结构Vue项目-启动Vue项目-配置端口Vue项目开发流程 Vue-cli 介绍&#xff1a;Vue-cli 是 Vue 官方提供的一个脚手架&#xff0c;用于快速生成一个 Vue 的项目模版 安装 NodeJS安装 Vue-cli npm install -g vue/cliVue项目-创建 图…

《深入理解分布式事务:原理与实战》读书笔记

Mysql事务 锁升级 行锁升级表锁&#xff1a;如果不是索引查找&#xff0c;或者索引失效&#xff0c;此时需要全表扫描&#xff0c;会升级为锁整张表。 为什么Mysql要把扫描到的每一行以及其间隙都加锁&#xff1f;这是为了防止幻读出现。幻读导致的问题是破坏了一致性声明&am…

【从0到1开发一个网关】网关日志的开发

文章目录 网关需要那些日志?日志配置整合GC日志网关需要那些日志? 网关需要日志记录是为了监控、维护和提高系统的性能、安全性以及可用性。日志的作用包括但不限于以下几点: 故障排查:当系统出现问题或故障时,日志记录可以帮助管理员或开发人员快速定位和解决问题。通过…

三国志14信息查询小程序(历史武将信息一览)制作更新过程03-主要页面的设计

1&#xff0c;小程序的默认显示 分为三部分&#xff0c;头部的标题、中间的内容区和底部的标签栏。点击标签可以切换不同页面&#xff0c;这是在app.json文件中配置的。代码如下&#xff1a; //所有用到的页面都需要在 pages 数组中列出&#xff0c;否则小程序可能会出现错误或…

前端面试题之HTML篇

1、src 和 href 的区别 具有src的标签有&#xff1a;script、img、iframe 具有href的标签有&#xff1a;link、a 区别 src 是source的缩写。表示源的意思&#xff0c;指向资源的地址并下载应用到文档中。会阻塞文档的渲染&#xff0c;也就是为什么js脚本放在底部而不是头部的…

skynet学习笔记01— skynet开发环境搭建(超详细)与第一个skynet程序

00、参考资料 https://blog.csdn.net/qq769651718/category_7480207.html 01、前置准备 开发所在目录 mhzzjmhzzj-virtual-machine:~/work/skynetStudy$ pwd /home/mhzzj/work/skynetStudy前置准备 mhzzjmhzzj-virtual-machine:~/work/skynetStudy$ sudo apt install lua5…

CSS示例001:鼠标放div上,实现旋转、放大、移动等效果

GPT能够很好的应用到我们的代码开发中&#xff0c;能够提高开发速度。你可以利用其代码&#xff0c;做出一定的更改&#xff0c;然后实现效能。 css实战中&#xff0c;经常会看到这样的场景&#xff0c;鼠标放到一个图片或者一个div块状时候&#xff0c;会出现旋转、放大、移动…

QtC++与QToolButton详解

介绍 QToolButton 是 Qt 中的一个控件类&#xff0c;用于创建工具按钮&#xff0c;它有以下主要作用和特点&#xff1a; 工具按钮&#xff1a; QToolButton 用于创建工具按钮&#xff0c;允许用户执行各种操作&#xff0c;如启动功能、弹出菜单、打开文件等。工具按钮通常用于…

地址的层次性

地址的层次性 当地址总数并不是很多的情况下&#xff0c;有了唯一地址就可以定位相互通信的主体。然而当地址的总数越来越多时&#xff0c;如何高效地从中找出通信的目标地址将成为一个重要的问题。为此人们发现地址除了具有唯一性还需要具有层次性。其实&#xff0c;在使用电…

基于跳蛛算法的无人机航迹规划-附代码

基于跳蛛算法的无人机航迹规划 文章目录 基于跳蛛算法的无人机航迹规划1.跳蛛搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用跳蛛算法来优化无人机航迹规划。 1.跳蛛搜索算法 …

react配置二级路由

1.在createBrowserRouter上添加basename属性&#xff0c;比如 const RouterRender createBrowserRouter([{path: /,element: <App><Login></Login></App>},...SystemRouter,...InventoryRouter,...FlowManageRouter,{path: "*",element: &…

Verilog 基础知识(一) Verilog 基础语法与注意事项

基础知识 0.1 模块(Module) Verilog中的module可以看成一个具有输入输出端口的黑盒子&#xff0c;该黑盒子有输入和输出接口(信号)&#xff0c;通过把输入在盒子中执行某些操作来实现某项功能。(类似于C语言中的函数) 图1 模块示意图 0.1.1 模块描述 图1 所示的顶层模块(top…

UNI-APP_获取手机品牌

在uni-app中&#xff0c;使用uni.getSystemInfoSync().brand可以获取设备的品牌信息。根据不同设备的品牌&#xff0c;uni.getSystemInfoSync().brand可能返回以下一些常见值 “Apple” - 苹果 “Samsung” - 三星 “Huawei” - 华为 “Xiaomi” - 小米 “OPPO” - OPPO “Vivo…

PaddleX数据集规范

目录 1、图像分类任务 2、目标检测任务 3、主体检测任务 4、图像分割任务 5、特征检索任务 6、文本检测任务 7、文本识别任务 8、版面分析任务 9、表格识别任务 10、关键信息抽取任务 11、点云3D目标检测任务 12、多目3D目标检测任务 13、单目3D目标检测任务 14、长…

CSS鼠标悬浮变小手

当我们在网页设计中需要用户点击或者选择某个元素时&#xff0c;很多时候会使用鼠标悬浮变小手的效果&#xff0c;这种效果可以让用户更快速的完成操作&#xff0c;提高用户体验。 在CSS中设置鼠标悬浮变小手效果非常简单&#xff0c;只需要使用cursor属性即可。以下是具体步骤…