Example Analysis of angular4 Lifecycle Hook
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!
