search
HomeWeb Front-endJS TutorialAngular learning talks about life cycle
Angular learning talks about life cycleJan 16, 2023 pm 08:03 PM
javascriptangularangular.jslife cycle

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!

Angular learning talks about life cycle

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:

Angular learning talks about life cycle

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(&#39;1. demo constructor&#39;)
  }

  ngOnChanges() {
    console.log(&#39;2. demo ngOnChanges&#39;)
  }

  ngOnInit() {
    console.log(&#39;3. demo ngOnInit&#39;)
  }

}

Angular learning talks about life cycle

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++;
}

Angular learning talks about life cycle

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')
}

Angular learning talks about life cycle

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(&#39;5. demo ngAfterContentInit&#39;);
}

Angular learning talks about life cycle

ngAfterContentChecked

ngAfterContentChecked The hook function is called after each ngDoCheck .

// demo.component.ts

ngAfterContentChecked() {
  console.log(&#39;5. demo ngAfterContentChecked&#39;);
}

Angular learning talks about life cycle

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(&#39;7. demo ngAfterViewInit&#39;);
}

Angular learning talks about life cycle

ngAfterViewChecked

视图检测完成调用。在 ngAfterViewinit 后调用,和在每次 ngAfterContentChecked 之后调用,也就是在每次 ngDoCheck 之后调用。

// demo.component.ts

ngAfterViewChecked() {
  console.log(&#39;8. ngAfterViewChecked&#39;)
}

Angular learning talks about life cycle

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(&#39;9. demo ngOnDestroy&#39;)
}

Angular learning talks about life cycle

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!

Statement
This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete
vue3改了几个生命周期函数vue3改了几个生命周期函数Jan 13, 2023 pm 05:57 PM

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

es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

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

如何处理 C++ 函数指针的析构和生命周期管理?如何处理 C++ 函数指针的析构和生命周期管理?Apr 17, 2024 pm 05:48 PM

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

servlet生命周期分几个阶段servlet生命周期分几个阶段Feb 23, 2023 pm 01:46 PM

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

Vue3中的生命周期函数:快速掌握Vue3的生命周期Vue3中的生命周期函数:快速掌握Vue3的生命周期Jun 18, 2023 am 08:20 AM

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

如何控制 Golang 协程的生命周期?如何控制 Golang 协程的生命周期?May 31, 2024 pm 06:05 PM

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

vue3的生命周期有哪些vue3的生命周期有哪些Feb 01, 2024 pm 04:33 PM

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语言中的变量作用域与生命周期Jun 01, 2023 pm 12:31 PM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

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

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

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

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),