Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of angular4 life cycle hook, which is very detailed and has certain reference value. Friends who are interested must finish it!

Understand

Angular provides lifecycle hooks that expose these critical life moments and give us the ability to take action when they occur. The hook function can be understood as doing the right thing at the right time.

Hook function

Ng4 mainly provides eight hook functions:

1 、 ngOnchanges

Called when the @ input property (input property) changes. Not for this property, it will not be called.

When the input property is an object, it is not called when the property value of the object changes, and is triggered when the reference of the object changes.

Precedes the ngOnInit call.

2 、 ngOnInit

It is executed only once, where the dom operation can be placed. (most commonly used)

3 、 NgDocheck

Will be called every time change detection occurs

NgDoCheck () is the change detection mechanism in Angular. It is implemented by zone.js. Its behavior is whenever an asynchronous event occurs in a component of your Angular. The entire component tree is checked to ensure that changes in component properties or pages are synchronized. So the trigger of ngDoCheck () is quite frequent. And it's something we can't expect. Perhaps an unconscious action on the page will trigger several or even dozens of ngDoCheck () lifecycle hooks.

4 、 ngAfterContentInit

Called after the component content is initialized

5 、 ngAfterContentChecked

Content projection: the content written by the parent component between the child tags will be rendered to the ng-content of the child template, similar to vue's slot

Called each time the component and subcomponents check the content

When both the parent and child components have the hook, the parent component executes first.

6 、 ngAfterViewInt

Called after the corresponding view of the component is initialized

7 、 ngAfterViewChecked

Called each time the component and subcomponents check the view

When both the parent and child components have the hook, the child component executes first.

Modification of bound properties (@ input attribute) is not allowed in ngAfterViewChecked and ngAfterViewInt, otherwise an exception is thrown

8 、 ngOnDestory

Destroy, unbind the event.

3. Execution sequence

Parent component:

Component template

{{name}}

module

@ Component ({selector: 'father', templateUrl:'. / father.component.html', styleUrls: ['. / father.component.scss']}) export class FatherComponent implements OnInit {public name:string; constructor () {} ngOnInit () {console.log ("parent component ngOninit");} ngOnchanges () {console.log ("parent component ngonchanges") } ngDoCheck () {console.log ("parent component ngDocheck")} ngAfterContentInit () {console.log ("parent component ngAfterContentInit")} ngAfterContentChecked () {console.log ("parent component ngAfterContentChecked")} ngAfterViewInit () {console.log ("parent component ngAfterViewInit")} ngAfterViewChecked () {console.log ("parent component ngAfterViewChecked")}}

Sub-component

@ Component ({selector: 'son', templateUrl:'. / son.component.html', styleUrls: ['. / son.component.scss']}) export class SonComponent implements OnInit {@ Input () name:string; constructor () {} ngOnInit () {console.log ("subcomponent ngOninit");} ngOnChanges () {console.log ("subcomponent ngonchanges") } ngDoCheck () {console.log ("subcomponent ngDocheck")} ngAfterContentInit () {console.log ("subcomponent ngAfterContentInit")} ngAfterContentChecked () {console.log ("subcomponent ngAfterContentChecked")} ngAfterViewInit () {console.log ("subcomponent ngAfterViewInit")} ngAfterViewChecked () {console.log ("subcomponent ngAfterViewChecked")}}

Look at the printed results:

When you enter something in the input of the parent component, the following results are printed:

The above is all the content of the article "sample Analysis of angular4 Lifecycle Hooks". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.