Home > Article > Web Front-end > Angular learning talks about life cycle
This article will help you continue to learn angular. When using angular for development, you will inevitably need to be exposed to the life cycle. Let's talk about the life cycle in Angular. I hope it will be helpful to you!
Readers who have been exposed to react
and vue
development should be familiar with the concept of life cycle. We cannot avoid it in the development process using angular
.
Components will go through a series of stages from creation to destruction. This is a life cycle, and these stages correspond to the lifecycle hooks
provided by the application.
So, what are these hooks
in angular
? Understanding them is important for where you should write your programs. [Related tutorial recommendations: "angular Tutorial"]
angular
, the order of life cycle execution is as follows:
- constructor 【常用,不算钩子函数,但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck - ngAfterContentInit - ngAfterContentChecked - ngAfterViewInit【常用】 - ngAfterViewChecked - ngOnDestroy【常用】
For explanation and verification, We use angular-cli
to generate a demo
project.
When the class
in es6
initializes the object, constructor
will immediately is called.
class Person { constructor(name) { console.log('be called') this.name = name; } } let jimmy = new Person('jimmy'); // be called
angular
The component itself exports a class. When this component is new
, it will get the default value in constructor
.
When we have external parameters change, we will execute ngOnChanges
, which means there are @ in the component Input
is called when the bound property value changes.
Simply put, when the parent component binds elements in the child component, this hook function will be triggered, and it can be started multiple times. This will be introduced in ngOnInit
below.
When this method is called, it means that the component has been initialized successfully. Called after the first ngOnChanges()
has completed, and only once.
// app.component.ts export 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:
Eh? Why is the hook function information in ngOnChanges
not printed?
As mentioned above, it needs to be triggered when the attribute value of the condition @Input
changes. Let’s modify it:
<!-- app.component.html --> <div> <app-demo></app-demo> </div>
// app.component.ts // AppComponent 类中添加属性 public count:number = 0;
<!-- demo.component.html --> <h3>count: {{ count }}</h3>
// demo.component.ts export 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 the value is passed to the subcomponent demo
through @Input
, it will be triggered. demo
ngOnChanges
in the component.
When the properties passed by @Input
change, the ngOnChanges
hook function in the demo
component can be triggered multiple times.
<!-- app.component.html --> <div> <app-demo [count]="count"></app-demo> <button (click)="parentDemo()">parent button</button> </div>
// app.component.ts parentDemo() { this.count++; }
This hook function is triggered when change detection occurs.
This hook function is called immediately after ngOnChanges
every time change detection is executed and ngOnInit
when change detection is executed for the first time.
// demo.component.ts ngDoCheck() { console.log('4. demo ngDoCheck') }
This hook function is called more frequently and is more expensive to use, so use it with caution.
Generally use ngOnChanges to detect changes instead of ngDoCheck
When projecting external content to internal components , ngAfterContentInit
is called after the first call to ngDoCheck
, and only once.
// demo.component.ts ngAfterContentInit() { console.log('5. demo ngAfterContentInit'); }
ngAfterContentChecked
The hook function is called after each ngDoCheck
.
// demo.component.ts ngAfterContentChecked() { console.log('5. demo ngAfterContentChecked'); }
Call this hook function after the view initialization is completed. Called after the first ngAfterContentChecked
, only once.
At this time, it is more reasonable to obtain the DOM
node of the page
// demo.compoent.ts ngAfterViewInit() { console.log('7. demo ngAfterViewInit'); }
视图检测完成调用。在 ngAfterViewinit
后调用,和在每次 ngAfterContentChecked
之后调用,也就是在每次 ngDoCheck
之后调用。
// demo.component.ts ngAfterViewChecked() { console.log('8. ngAfterViewChecked') }
组件被销毁时候进行的操作。
在这个钩子函数中,我们可以取消订阅,取消定时操作等等。
<!-- app.component.html --> <app-demo [count]="count" *ngIf="showDemoComponent"></app-demo> <button (click)="hideDemo()">hide demo component</button>
// app.component.ts public showDemoComponent: boolean = true; hideDemo() { this.showDemoComponent = false }
// demo.component.ts ngOnDestroy() { console.log('9. demo ngOnDestroy') }
PS: 不知道读者有没有发现,调用一次的钩子函数都比较常用~
更多编程相关知识,请访问:编程入门!!
The above is the detailed content of Angular learning talks about life cycle. For more information, please follow other related articles on the PHP Chinese website!