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) in Angular. 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

1. Summary

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.

2. Life cycle and sequence

• 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

• ##ngAfterViewInit(): When Angular has initialized the component view and Called after its subview or view containing this directive.

• ngAfterViewChecked(): Called after ngAfterViewInit() and every ngAfterContentChecked().

• ngOnDestroy(): Called every time before Angular destroys a directive/component to clean up and release resources.

3. Respond to life cycle events

We respond to components or components by implementing one or more life cycle hook interfaces defined in Angular Events in the instruction life cycle. Each interface has a unique hook method, and their names are composed of the interface name plus the ng prefix. For example:

@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() corresponds to interface OnInit.

2) Multiple hook interfaces can be implemented, such as

export class DemoComponent implements OnInit, OnDestroy {<!-- -->

4. Main life cycle Event

4.1. Initialization event ngOnInit()

Use the ngOnInit() method to perform the following initialization tasks:

• The logic is slightly complex and not suitable for logic placed in the constructor

• Data access logic in initialization

• Process the logic that needs to be initialized based on the parameters passed in by the parent component (@Input)

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():

• Unsubscribe from observables and DOM events.

• Stop the interval timer.

• Unregister all callbacks registered globally or in application services by this instruction.

• Release other occupied resources.

5. Summary

• Use the life cycle event hook function, don’t forget the

  implements after the class name Corresponding interface, otherwise it will not take effect;

• Initialization code, distinguish which ones to put constructors and which ones to put ngOnInit();

• Streamlined hook event methods can be used to avoid performance problems;

• ngOnChanges() occurs very frequently, and adding complex logic will affect performance;

For more programming-related knowledge, please visit:

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!