Maison >interface Web >js tutoriel >Un article pour parler du cycle de vie en Angular
Lors de l'utilisation d'Angular pour le développement, il est inévitable d'avoir un contact avec le cycle de vie. Dans cet article, nous parlerons du cycle de vie dans Angular.
Les lecteurs qui ont été exposés au développement react
et vue
doivent être familiers avec le concept de cycle de vie. Nous ne pouvons pas l'éviter dans le processus de développement en utilisant angular
. [Recommandation de tutoriel connexe : "react
和 vue
开发的读者应该对生命周期这个概念不陌生。我们在使用 angular
开发的过程中,是避免不了的。【相关教程推荐:《angular教程》】
组件从开始建立到销毁的过程中,会经历过一系列的阶段。这就是一个生命周期,这些阶段对应着应用提供的 lifecycle hooks
。
那么,在 angular
中,这些 hooks
都有哪些呢?了解它们,对你编写程序应该在哪里编写,很重要。
angular
中,生命周期执行的顺序如下:
- constructor 【常用,不算钩子函数,但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck - ngAfterContentInit - ngAfterContentChecked - ngAfterViewInit【常用】 - ngAfterViewChecked - ngOnDestroy【常用】
为了解说和验证,我们用 angular-cli
生成一个 demo
项目。
在 es6
中的 class
初始化对象的时候,constructor
会立即被调用。
class Person { constructor(name) { console.log('be called') this.name = name; } } let jimmy = new Person('jimmy'); // be called
angular
的组件本身就是导出一个类。当这个组件被 new
起来的时候,会获取 constructor
中的预设的值。
当我们有外部参数更改的时候,我们就会执行 ngOnChanges
,也就是说组件中有 @Input
所绑定的属性值发生改变的时候调用。
简单说,父组件绑定子组件中的元素,会触发这个钩子函数,可以多次出发。这在下面的 ngOnInit
总会介绍。
这个方法调用的时候,说明组件已经初始化成功。在第一次 ngOnChanges()
完成之后调用,且只调用一次。
// app.component.ts export class AppComponent implements OnInit, OnChanges { constructor() { console.log('1. constructor') } ngOnChanges() { console.log('2. ngOnChanges') } ngOnInit() { console.log('3. ngOnInit') } }
打印的信息如下:
咦?怎么没有打印 ngOnChanges
中的钩子函数信息呢?
上面已经说过了,需要触发条件 @Input
的属性值改变的时候。我们来修改一下:
<!-- 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') } }
当通过 @Input
将值传递给子组件 demo
的时候,就会触发 demo
组件中的 ngOnChanges
。
当 @Input
传递的属性发生改变的时候,可以多次触发 demo
组件中的 ngOnChanges
钩子函数。
<!-- app.component.html --> <div> <app-demo [count]="count"></app-demo> <button (click)="parentDemo()">parent button</button> </div>
// app.component.ts parentDemo() { this.count++; }
当发生变化检测的时候,触发该钩子函数。
这个钩子函数,紧跟在每次执行变更检测时候 ngOnChanges
和首次执行执行变更检测时 ngOnInit
后面调用。
// demo.component.ts ngDoCheck() { console.log('4. demo ngDoCheck') }
这个钩子函数调用得比较频繁,使用成本比较高,谨慎使用。
一般使用 ngOnChanges 来检测变动,而不是 ngDoCheck
当把外部的内容投影到内部组件,第一次调用 ngDoCheck
之后调用 ngAfterContentInit
,而且只调用一次。
// demo.component.ts ngAfterContentInit() { console.log('5. demo ngAfterContentInit'); }
ngAfterContentChecked
钩子函数在每次 ngDoCheck
之后调用.
// demo.component.ts ngAfterContentChecked() { console.log('5. demo ngAfterContentChecked'); }
视图初始化完成调用此钩子函数。在第一次 ngAfterContentChecked
之后调用,只调用一次。
这个时候,获取页面的 DOM
节点比较合理
// demo.compoent.ts ngAfterViewInit() { console.log('7. demo ngAfterViewInit'); }
视图检测完成调用。在 ngAfterViewinit
后调用,和在每次 ngAfterContentChecked
之后调用,也就是在每次 ngDoCheck
Tutoriel angulaire
hooks de cycle de vie
fournis par l'application. 🎜🎜Alors, c'est quoi ces crochets
en angulaire
? Les comprendre est important pour savoir où vous devez écrire vos programmes. 🎜🎜Dans angular
, l'ordre d'exécution du cycle de vie est le suivant : 🎜// demo.component.ts ngAfterViewChecked() { console.log('8. ngAfterViewChecked') }🎜Pour explication et vérification, nous utilisons
angular-cli
pour générer une démo projet . 🎜<h3 data-id="heading-0">constructeur</h3>🎜Lorsque la <code>class
dans es6
initialise l'objet, constructeur
sera appelé immédiatement. Le composant 🎜<!-- app.component.html --> <app-demo [count]="count" *ngIf="showDemoComponent"></app-demo> <button (click)="hideDemo()">hide demo component</button>🎜
angular
exporte lui-même une classe. Lorsque ce composant est nouveau
, il obtiendra la valeur par défaut dans le constructeur
. 🎜ngOnChanges
, ce qui signifie qu'il y a dans le composant @Input
est appelé lorsque la valeur de la propriété liée change. 🎜🎜En termes simples, lorsque le composant parent lie des éléments dans le composant enfant, cette fonction de hook sera déclenchée et elle pourra être démarrée plusieurs fois. Ceci est toujours introduit dans ngOnInit
ci-dessous. 🎜ngOnChanges()
terminé, et une seule fois. 🎜// app.component.ts public showDemoComponent: boolean = true; hideDemo() { this.showDemoComponent = false }🎜Les informations imprimées sont les suivantes : 🎜🎜🎜🎜Hein ? Pourquoi les informations sur la fonction hook dans
ngOnChanges
ne sont-elles pas imprimées ? 🎜🎜Comme mentionné ci-dessus, la condition de déclenchement doit être déclenchée lorsque la valeur de l'attribut @Input
change. Modifions-le : 🎜// demo.component.ts ngOnDestroy() { console.log('9. demo ngOnDestroy') }rrreeerrreeerrreee🎜🎜🎜Lorsque la valeur est transmise au sous-composant
demo
via @Input
, le dans le composant <code>demo
sera déclenché. ngOnChanges. 🎜🎜Lorsque les propriétés transmises par @Input
changent, la fonction hook ngOnChanges
dans le composant <code>demo peut être déclenchée plusieurs fois. 🎜rrreeerrree🎜🎜ngDoCheck🎜Lorsque la détection d'un changement se produit, cette fonction de hook est déclenchée. 🎜🎜Cette fonction hook est appelée immédiatement après ngOnChanges
chaque fois qu'une détection de changement est effectuée et ngOnInit
lorsque la détection de changement est effectuée pour la première fois. 🎜rrreee🎜🎜🎜 Cette fonction hook est appelée plus fréquemment et est plus coûteuse à utiliser, utilisez-la donc avec prudence. 🎜🎜Utilisez généralement ngOnChanges pour détecter les modifications au lieu de ngDoCheck🎜
ngAfterContentInit
après avoir appelé ngDoCheck
plusieurs fois, et une seule fois. 🎜rrreee🎜🎜ngAfterContentChecked🎜ngAfterContentChecked
La fonction hook est appelée après chaque ngDoCheck
.🎜rrreee🎜🎜ngAfterContentChecked
, une seule fois. 🎜🎜À ce stade, il est plus raisonnable d'obtenir le nœud DOM
de la page🎜rrreee🎜🎜ngAfterViewinit
et appelé après chaque ngAfterContentChecked
, c'est-à-dire appelé après chaque 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: 不知道读者有没有发现,调用一次的钩子函数都比较常用~
【完】
更多编程相关知识,请访问:编程入门!!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!