Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge points of life cycle case analysis in Angular. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Readers who have been exposed to react and vue development should be familiar with the concept of life cycle. We can't avoid it in the process of developing with angular.

Components go through a series of stages from creation to destruction. This is a lifecycle, and these phases correspond to the lifecycle hooks provided by the application.

So, what are these hooks in angular? Understanding them is important to where you should write your program.

In angular, the order in which the lifecycle is executed is as follows:

-constructor [common, not hook function, but very important]-ngOnChanges [common]-ngOnInit [common]-ngDoCheck-ngAfterContentInit-ngAfterContentChecked-ngAfterViewInit [common]-ngAfterViewChecked- ngOnDestroy [commonly used]

For illustration and verification, we generate a demo project using angular-cli.

Constructor

When class in es6 initializes the object, constructor is called immediately.

Class Person {constructor (name) {console.log ('be called') this.name = name;}} let jimmy = new Person ('jimmy'); / / be called

The component of angular itself is to export a class. When this component is new up, it will get the default value in constructor.

NgOnChanges

When we have an external parameter change, we execute the ngOnChanges, that is, when the value of the property bound by @ Input in the component changes.

To put it simply, if the parent component binds the elements in the child component, the hook function will be triggered and can be started multiple times. This is always described in the following ngOnInit.

NgOnInit

When this method is called, the component has been initialized successfully. Called after the first ngOnChanges () completes, and only once.

/ app.component.tsexport 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:

Huh? Why didn't you print the hook function information in ngOnChanges?

As mentioned above, when the attribute value of the trigger condition @ Input needs to be changed. Let's modify it:

Add the attribute public count:number = 0bot count to the app.component.ts// AppComponent class: {{count}} / / demo.component.tsexport 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 a value is passed to the child component demo through @ Input, the ngOnChanges in the demo component is triggered.

When the property passed by @ Input changes, the ngOnChanges hook function in the demo component can be triggered multiple times.

Parent button// app.component.tsparentDemo () {this.count++;} ngDoCheck

When change detection occurs, the hook function is triggered.

This hook function is called immediately after ngOnChanges each time change detection is performed and ngOnInit when change detection is performed for the first time.

/ / demo.component.tsngDoCheck () {console.log ('4. Demo ngDoCheck')}

This hook function is called frequently and is expensive to use, so it should be used with caution.

NgOnChanges is generally used to detect changes, not ngDoCheck

NgAfterContentInit

When projecting external content to an internal component, ngAfterContentInit is called after the first call to ngDoCheck, and only once.

/ / demo.component.tsngAfterContentInit () {console.log ('5. Demo ngAfterContentInit');}

NgAfterContentChecked

The ngAfterContentChecked hook function is called after each ngDoCheck.

/ / demo.component.tsngAfterContentChecked () {console.log ('5. Demo ngAfterContentChecked');} ngAfterViewInit

This hook function is called when the view initialization is complete. Called after the first ngAfterContentChecked, only once.

At this time, it is reasonable to get the DOM node of the page.

/ / demo.compoent.tsngAfterViewInit () {console.log ('7. Demo ngAfterViewInit');}

NgAfterViewChecked

View detection completes the call. Called after ngAfterViewinit, and after each ngAfterContentChecked, that is, after each ngDoCheck.

/ / demo.component.tsngAfterViewChecked () {console.log ('8. NgAfterViewChecked')} ngOnDestroy

The action taken when the component is destroyed.

In this hook function, we can unsubscribe, cancel scheduled operations, and so on.

Hide demo component// app.component.tspublic showDemoComponent: boolean = true;hideDemo () {this.showDemoComponent = false} / / demo.component.tsngOnDestroy () {console.log ('9. Demo ngOnDestroy')} above is all the content of the article "Lifecycle case Analysis in Angular". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.