Home>Article>Web Front-end> A brief discussion on the life cycle of components in Angular
This article will introduce to you the life cycle of components (Component Lifecycle Hook) inAngular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Environment:
Angular CLI: 11.0.6
Angular: 11.0.7
Node: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code
When Angular instantiates a component class and renders the component view and its subviews , the life cycle of the component instance begins. The lifecycle is always accompanied by change detection, with Angular checking when data-bound properties change and updating view and component instances as needed. The life cycle ends when Angular destroys the component instance and removes the template it rendered from the DOM. Directives have a similar lifecycle as Angular creates, updates, and destroys instances during execution. [Related tutorial recommendations: "angular tutorial"]
Your application can use the life cycle hook method to trigger key events in the component or directive life cycle to initialize new instances when needed. Start change detection, respond to updates during change detection, and clean up before deleting the instance.
ngOnChanges(): Responds when Angular sets or resets the input property of the data binding.
ngOnInit(): Initializes the directive/component after Angular first displays data binding and sets the directive/component's input properties.
ngDoCheck(): Called after ngOnChanges() each time change detection is performed and ngOnInit() when change detection is performed for the first time.
ngAfterContentInit(): Called after Angular projects external content into the component view or the view where the directive is located.
ngAfterContentChecked(): ngAfterContentInit() and each time ngDoCheck() is called
@Component() export class DemoComponent implements OnInit { constructor() { } // implement OnInit's `ngOnInit` method ngOnInit() { // do something here } }
Instructions: 1) To respond to events in the life cycle through the life cycle hook interface, you need to declare the implementation (implements) of the specific hook interface after the class name . Then define a hook function in the code to be executed. For example,ngOnInit()
2) Multiple hook interfaces can be implemented, such ascorresponds to interface
OnInit.
export class DemoComponent implements OnInit, OnDestroy {
4.1. Initialization event ngOnInit()
Use the ngOnInit() method to perform the following initialization tasks:4.2. Instance destruction ngOnDestroy()
Put the cleanup logic in ngOnDestroy(), and this logic will definitely run before Angular destroys the instruction. The following logic can be put into ngOnDestroy():implements after the class nameCorresponding interface, otherwise it will not take effect;
Introduction to Programming! !
The above is the detailed content of A brief discussion on the life cycle of components in Angular. For more information, please follow other related articles on the PHP Chinese website!