This article will help you continue to learn angular. When using angular for development, you will inevitably need to be exposed to the life cycle. Let's talk about the life cycle in Angular. I hope it will be helpful to you!
Readers who have been exposed to react
and vue
development should be familiar with the concept of life cycle. We cannot avoid it in the development process using angular
.
Components will go through a series of stages from creation to destruction. This is a life cycle, and these stages correspond to the lifecycle hooks
provided by the application.
So, what are these hooks
in angular
? Understanding them is important for where you should write your programs. [Related tutorial recommendations: "angular Tutorial"]
angular
, the order of life cycle execution is as follows:
- constructor 【常用,不算钩子函数,但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck - ngAfterContentInit - ngAfterContentChecked - ngAfterViewInit【常用】 - ngAfterViewChecked - ngOnDestroy【常用】
For explanation and verification, We use angular-cli
to generate a demo
project.
constructor
When the class
in es6
initializes the object, constructor
will immediately is called.
class Person { constructor(name) { console.log('be called') this.name = name; } } let jimmy = new Person('jimmy'); // be called
angular
The component itself exports a class. When this component is new
, it will get the default value in constructor
.
ngOnChanges
When we have external parameters change, we will execute ngOnChanges
, which means there are @ in the component Input
is called when the bound property value changes.
Simply put, when the parent component binds elements in the child component, this hook function will be triggered, and it can be started multiple times. This will be introduced in ngOnInit
below.
ngOnInit
When this method is called, it means that the component has been initialized successfully. Called after the first ngOnChanges()
has completed, and only once.
// app.component.ts export class AppComponent implements OnInit, OnChanges { constructor() { console.log('1. constructor') } ngOnChanges() { console.log('2. ngOnChanges') } ngOnInit() { console.log('3. ngOnInit') } }
The printed information is as follows:
Eh? Why is the hook function information in ngOnChanges
not printed?
As mentioned above, it needs to be triggered when the attribute value of the condition @Input
changes. Let’s modify it:
<!-- app.component.html --> <div> <app-demo></app-demo> </div>
// app.component.ts // AppComponent 类中添加属性 public count:number = 0;
<!-- demo.component.html --> <h3 id="count-nbsp-nbsp-count-nbsp">count: {{ count }}</h3>
// demo.component.ts export class DemoComponent implements OnInit, OnChanges { @Input() public count: number; constructor() { console.log('1. demo constructor') } ngOnChanges() { console.log('2. demo ngOnChanges') } ngOnInit() { console.log('3. demo ngOnInit') } }
When the value is passed to the subcomponent demo
through @Input
, it will be triggered. demo
ngOnChanges
in the component.
When the properties passed by @Input
change, the ngOnChanges
hook function in the demo
component can be triggered multiple times.
<!-- app.component.html --> <div> <app-demo [count]="count"></app-demo> <button (click)="parentDemo()">parent button</button> </div>
// app.component.ts parentDemo() { this.count++; }
ngDoCheck
This hook function is triggered when change detection occurs.
This hook function is called immediately after ngOnChanges
every time change detection is executed and ngOnInit
when change detection is executed for the first time.
// demo.component.ts ngDoCheck() { console.log('4. demo ngDoCheck') }
This hook function is called more frequently and is more expensive to use, so use it with caution.
Generally use ngOnChanges to detect changes instead of ngDoCheck
ngAfterContentInit
When projecting external content to internal components , ngAfterContentInit
is called after the first call to ngDoCheck
, and only once.
// demo.component.ts ngAfterContentInit() { console.log('5. demo ngAfterContentInit'); }
ngAfterContentChecked
ngAfterContentChecked
The hook function is called after each ngDoCheck
.
// demo.component.ts ngAfterContentChecked() { console.log('5. demo ngAfterContentChecked'); }
ngAfterViewInit
Call this hook function after the view initialization is completed. Called after the first ngAfterContentChecked
, only once.
At this time, it is more reasonable to obtain the DOM
node of the page
// demo.compoent.ts ngAfterViewInit() { console.log('7. demo ngAfterViewInit'); }
ngAfterViewChecked
视图检测完成调用。在 ngAfterViewinit
后调用,和在每次 ngAfterContentChecked
之后调用,也就是在每次 ngDoCheck
之后调用。
// demo.component.ts ngAfterViewChecked() { console.log('8. ngAfterViewChecked') }
ngOnDestroy
组件被销毁时候进行的操作。
在这个钩子函数中,我们可以取消订阅,取消定时操作等等。
<!-- app.component.html --> <app-demo [count]="count" *ngIf="showDemoComponent"></app-demo> <button (click)="hideDemo()">hide demo component</button>
// app.component.ts public showDemoComponent: boolean = true; hideDemo() { this.showDemoComponent = false }
// demo.component.ts ngOnDestroy() { console.log('9. demo ngOnDestroy') }
PS: 不知道读者有没有发现,调用一次的钩子函数都比较常用~
更多编程相关知识,请访问:编程入门!!
The above is the detailed content of Angular learning talks about life cycle. For more information, please follow other related articles on the PHP Chinese website!

vue3改了4个生命周期函数。Vue3组合式api取消了beforeCreated和created钩子函数,采用steup钩子代替,且里面不能使用this。Vue3里面的组件销毁的钩子函数由destroyed和beforeDestroy换成了beforeUnmount和unmounted。

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

在C++中,函数指针需要适当的析构和生命周期管理。可以通过以下方式实现:手动析构函数指针,释放内存。使用智能指针,如std::unique_ptr或std::shared_ptr,自动管理函数指针的生命周期。将函数指针绑定到对象,对象生命周期管理函数指针的析构。在GUI编程中,使用智能指针或绑定到对象可确保回调函数在适当的时候被析构,避免内存泄漏和不一致。

Servlet生命周期是指servlet从创建直到毁灭的整个过程,可分为3个阶段:1、初始化阶段,调用init()方法实现Servlet的初始化工作;2、运行阶段(处理请求),容器会为指定请求创建代表HTTP请求的ServletRequest对象和代表HTTP响应的ServletResponse对象,然后将它们作为参数传递给Servlet的service()方法;3、销毁阶段。

Vue3是目前前端界最热门的框架之一,而Vue3的生命周期函数是Vue3中非常重要的一部分。Vue3的生命周期函数可以让我们实现在特定的时机触发特定的事件,增强了组件的高度可控性。本文将从Vue3的生命周期函数的基本概念、各个生命周期函数的作用和使用方法以及实现案例等方面进行详细探究和讲解,帮助读者快速掌握Vue3的生命周期函数。一、Vue3的生命周期函数的

控制Go协程的生命周期可以通过以下方式:创建协程:使用go关键字启动新任务。终止协程:等待所有协程完成,使用sync.WaitGroup。使用通道关闭信号。使用上下文context.Context。

vue3的生命周期:1、beforeCreate;2、created;3、beforeMount;4、mounted;5、beforeUpdate;6、updated;7、beforeDestroy;8、destroyed;9、activated;10、deactivated;11、errorCaptured;12、getDerivedStateFromProps等等

Go语言是一种开源的静态类型语言,它具有简洁、高效、可靠等特点,越来越受到开发者的喜爱。在Go语言中,变量是程序中最基本的数据存储形式,变量的作用域和生命周期对于程序的正确性和效率十分重要。变量的作用域指的是变量的可见性和可访问性,即在何处可以访问这个变量。在Go语言中,变量的作用域分为全局变量和局部变量。全局变量是定义在函数外部的变量,它可以被整个程序任何


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
