首页 > 其他分享 >Angular系列 -> 生命周期钩子

Angular系列 -> 生命周期钩子

时间:2023-04-23 16:01:04浏览次数:41  
标签:生命周期 钩子 调用 视图 指令 Angular

简介:

Angular 指令的生命周期,是用来记录指令从创建、应用及销毁的过程。Angular 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作。

生命周期介绍: 

  1. ngOnChanges:
    当数据绑定输入属性的值发生变化时;
    @input属性(输入属性)发生变化时;
  2. ngOnInit
    在第一次 ngOnChanges 后调用
  3. ngDoCheck
    自定义的方法,用于检测和处理值的改变
  4. ngAfterContentInit
     在组件内容初始化之后调用
  5. ngAfterContentChecked
    组件每次检查内容时调用
  6. ngAfterViewInit
     组件相应的视图初始化之后调用
  7. ngAfterViewChecked
    组件每次检查视图时调用
  8. ngOnDestroy
    指令销毁前调用
【注】不要在视图钩子中改变数据(因为会导致循环调用),违反单向数据流。 要改用setTimeout,使得在下一轮JS 开始执行的时候触发

参考链接:https://juejin.cn/post/6844903933459038215

 

标签:生命周期,钩子,调用,视图,指令,Angular
From: https://www.cnblogs.com/z7luv/p/15672746.html

相关文章

  • Angular系列 -> 父子传值
    1.parenttochild: parent: <app-child[childMessage]="parentMessage"></app-child>child:@Input()childMessage:string;2.childtoparent:@ViewChild:使父组件可以获取到子组件的属性和功能;但是,子组件直到视图初始化完成后才可用,这就意味着我们需要在AfterView......
  • 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序
    目录H5微信小程序测试代码文档页面生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle组件生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle经测试,得出结论:H5和微信小程序的生命周期函数调用顺序不一致H5pagebeforeCreatepag......
  • react 生命周期钩子函数
    1、挂载:construct、getDerivedStateFromProps、render、componentDidMounted2、更新:getDerivedStateFromProps、componentWillUpdate、render、getSnapshotBeforeUpdate、componentDidUpdated3、卸载:componentWillUnmounted4、请求放在componentDidMount里react生命周期图:h......
  • vue2源码-十一、Vue的生命周期
    Vue的生命周期钩子函数是如何实现?内部利用一个发布订阅模式,将用户写的钩子维护成一个数组,后续依次调用hooks。主要靠的是mergerOptions方法有哪些?引用自https://vue3js.cn/interview/vue/lifecycle.html#%E4%BA%8C%E3%80%81%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%9C%......
  • 类中自定义函数并调用and使用钩子函数打印类中变量
    在一个类中自定义一个函数A,并在前向传播函数forword中调用这个函数假设您正在编写一个PyTorch模型,您可以按照以下方式在类中定义函数A,并在forward函数中调用它:importtorchimporttorch.nnasnnclassMyModel(nn.Module):def__init__(self):super(MyMod......
  • 第二章 使用MASA Stack+.Net 从零开始搭建IoT平台 设备生命周期管理-设备注册.
    设备生命周期管理-设备注册@目录设备生命周期管理-设备注册前言一、设备注册流程二、MQTT注册1.在EMQX中添加认证方式2.创建ApiKey3.调用接口创建用户三、测试设备连接四、编写代码总结前言我们不希望任何设备都可以接入我们的IoT平台,所以一个设备正常的接入流程是这样的,1、......
  • Spring Bean 的生命周期
    Bean的生命周期概括起来就是 4个阶段: 1.主要分为实例化(Instantiation),属性赋值(Populate),初始化(Initialization),销毁(Destruction)这四个大阶段2.初始化的具体操作,有Aware接口的依赖注入,BeanPostProcessor 在初始化前后的处理以及InitializingBean和init-method的初始化操作......
  • Android生命周期继续踩坑
    android.overridePathCheck=true“覆盖路径检查”as出现问题connecttimeout 在多个窗口中使用Logcat标签页可帮助您在不同的设备或查询之间轻松切换。您可以点击 NewTab 图标  创建多个Logcat标签页。右键点击标签页可对其重命名和重新排列。此外,您还可以在......
  • 一统天下 flutter - widget 基础: 生命周期
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget基础:生命周期示例如下:lib\widget\basic\lifecycle.dart/**生命周期*/import'package:flutter/material.dart';import'../../helper.dart';classLifecy......
  • angular项目国际化yaml自定义配置(ngx-translate)
    angular国际化配置很简单,但是想不用json文件用yaml文件,并且同一语言分label.jp.yaml和message.jp.yaml两个文件分开管理。1、下载ngx-translate的依赖库npminstall@ngx-translate/core--savenpminstall@ngx-translate/http-loader--save2、app.module.ts 中引入TranslateMo......