L'apprentissage angulaire parle du cycle de vie-js tutoriel-php.cn

Cet article vous aidera à continuer à apprendre Angular. Lors du développement avec Angular, vous devrez inévitablement être exposé au cycle de vie. J'espère que cela vous sera utile !

L'apprentissage angulaire parle du cycle de vie

Les lecteurs qui ont été exposés au développementreactetvuedoivent être familiers avec le concept de cycle de vie. Nous ne pouvons pas l'éviter dans le processus de développement en utilisantangular.react和vue开发的读者应该对生命周期这个概念不陌生。我们在使用angular开发的过程中，是避免不了的。

组件从开始建立到销毁的过程中，会经历过一系列的阶段。这就是一个生命周期，这些阶段对应着应用提供的lifecycle hooks。

那么，在angular中，这些hooks都有哪些呢？了解它们，对你编写程序应该在哪里编写，很重要。【相关教程推荐：《angular教程》】

angular中，生命周期执行的顺序如下：

- constructor 【常用，不算钩子函数，但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck - ngAfterContentInit - ngAfterContentChecked - ngAfterViewInit【常用】 - ngAfterViewChecked - ngOnDestroy【常用】

Copier après la connexion

为了解说和验证，我们用angular-cli生成一个demo项目。

constructor

在es6中的class初始化对象的时候，constructor会立即被调用。

class Person { constructor(name) { console.log('be called') this.name = name; } } let jimmy = new Person('jimmy'); // be called

Copier après la connexion

angular的组件本身就是导出一个类。当这个组件被new起来的时候，会获取constructor中的预设的值。

ngOnChanges

当我们有外部参数更改的时候，我们就会执行ngOnChanges，也就是说组件中有@Input所绑定的属性值发生改变的时候调用。

简单说，父组件绑定子组件中的元素，会触发这个钩子函数，可以多次出发。这在下面的ngOnInit总会介绍。

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') } }

Copier après la connexion

打印的信息如下：

Lapprentissage angulaire parle du cycle de vie

咦？怎么没有打印ngOnChanges中的钩子函数信息呢？

上面已经说过了，需要触发条件@Input的属性值改变的时候。我们来修改一下：

Copier après la connexion

// app.component.ts // AppComponent 类中添加属性 public count:number = 0;

Copier après la connexion

 count: {{ count }}

Copier après la connexion

// 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') } }

Copier après la connexion

Lapprentissage angulaire parle du cycle de vie

当通过@Input将值传递给子组件demo的时候，就会触发demo组件中的ngOnChanges。

当@Input传递的属性发生改变的时候，可以多次触发demo组件中的ngOnChanges钩子函数。

Copier après la connexion

// app.component.ts parentDemo() { this.count++; }

Copier après la connexion

Lapprentissage angulaire parle du cycle de vie

ngDoCheck

当发生变化检测的时候，触发该钩子函数。

这个钩子函数，紧跟在每次执行变更检测时候ngOnChanges和首次执行执行变更检测时ngOnInit后面调用。

// demo.component.ts ngDoCheck() { console.log('4. demo ngDoCheck') }

Copier après la connexion

Lapprentissage angulaire parle du cycle de vie

这个钩子函数调用得比较频繁，使用成本比较高，谨慎使用。

一般使用 ngOnChanges 来检测变动，而不是 ngDoCheck

ngAfterContentInit

当把外部的内容投影到内部组件，第一次调用ngDoCheck之后调用ngAfterContentInit，而且只调用一次。

// demo.component.ts ngAfterContentInit() { console.log('5. demo ngAfterContentInit'); }

Copier après la connexion

Lapprentissage angulaire parle du cycle de vie

ngAfterContentChecked

ngAfterContentChecked钩子函数在每次ngDoCheck之后调用.

// demo.component.ts ngAfterContentChecked() { console.log('5. demo ngAfterContentChecked'); }

Copier après la connexion

Lapprentissage angulaire parle du cycle de vie

ngAfterViewInit

视图初始化完成调用此钩子函数。在第一次ngAfterContentChecked之后调用，只调用一次。

这个时候，获取页面的DOM

Les composants passeront par une série d'étapes allant de la création à la destruction. Il s'agit d'un cycle de vie, et ces étapes correspondent aux hooks de cycle de viefournis par l'application.

Lapprentissage angulaire parle du cycle de vie Alors, c'est quoi cescrochetsenangulaire? Les comprendre est important pour savoir où vous devez écrire vos programmes. [Tutoriels associés recommandés : "tutoriel angulaire"]

angulaire< /code>, l'ordre d'exécution du cycle de vie est le suivant : // demo.compoent.ts ngAfterViewInit() { console.log(&#39;7. demo ngAfterViewInit&#39;); }
Copier après la connexion
Pour explication et vérification, nous utilisons angular-clipour générer un projet
       demo.
       constructeurLorsque la
       classdans
       es6initialise l'objet, < code>constructeursera appelé immédiatement. Le composant
       
        
         // demo.component.ts ngAfterViewChecked() { console.log('8. ngAfterViewChecked') }
         
          Copier après la connexion
         
        
        
         Copier après la connexion
        
       
       angularexporte lui-même une classe. Lorsque ce composant est
       nouveau, il obtiendra la valeur par défaut dans le
       constructeur.
       ngOnChangesLorsque nous avons des changements de paramètres externes, nous exécuterons
       ngOnChanges, c'est-à-dire qu'il est dit qu'il existe un
       @Inputdans le composant qui 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
       ngOnInitci-dessous.
       ngOnInitLorsque cette méthode est appelée, cela signifie que le composant a été initialisé avec succès. Appelé une fois le premier
       ngOnChanges()terminé, et une seule fois.
       
        
           
         
          Copier après la connexion
         
        
        
         Copier après la connexion
        
       Les informations imprimées sont les suivantes :
       Hein ? Pourquoi les informations sur la fonction hook dans
       ngOnChangesne 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
       @Inputchange. Modifions-le :
       
        
         // app.component.ts public showDemoComponent: boolean = true; hideDemo() { this.showDemoComponent = false }
         
          Copier après la connexion
         
        
        
         Copier après la connexion
        
       
       
        
         // demo.component.ts ngOnDestroy() { console.log('9. demo ngOnDestroy') }
         
          Copier après la connexion
         
        
        
         Copier après la connexion
        
       rrreeerrreee
       Lorsque la valeur est transmise au sous-composant
       demovia
       @Input, le
       dans le composant demosera déclenché. ngOnChanges. Lorsque les propriétés transmises par
       @Inputchangent, la fonction hook
       ngOnChangesdans le composant demopeut être déclenchée plusieurs fois. rrreeerrree
       < h3 data-id="heading-3">
       ngDoCheckCette fonction de hook est déclenchée lorsque la détection d'un changement se produit. Cette fonction hook est appelée immédiatement après
       ngOnChangeschaque fois qu'une détection de changement est effectuée et
       ngOnInitlorsque 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
       
       ngAfterContentInitLors de l'utilisation de contenu externe Projeté sur un composant interne,
       ngDoCheckest appelé pour la première fois puis
       ngAfterContentInitest appelé, et une seule fois. rrreee
       < h3 data-id="heading-5">
       ngAfterContentCheckedLa fonction de hook
       ngAfterContentCheckedest appelée après chaque
       ngDoCheck.rrreee
       
       ngAfterViewInitAppelez cette fonction hook une fois l'initialisation de la vue terminée. Appelé après le premier
       ngAfterContentChecked, une seule fois. A ce moment, il est plus raisonnable d'obtenir le nœud
       DOMde la pagerrreee
       ngAfterViewChecked
       视图检测完成调用。在ngAfterViewinit后调用，和在每次ngAfterContentChecked之后调用，也就是在每次ngDoCheck之后调用。
       
        
         // demo.component.ts ngAfterViewChecked() { console.log('8. ngAfterViewChecked') }
         
          Copier après la connexion
         
        
        
         Copier après la connexion
        
       
       
       ngOnDestroy
       组件被销毁时候进行的操作。
       
        在这个钩子函数中，我们可以取消订阅，取消定时操作等等。
       
       
        
           
         
          Copier après la connexion
         
        
        
         Copier après la connexion
        
       
       
        
         // app.component.ts public showDemoComponent: boolean = true; hideDemo() { this.showDemoComponent = false }
         
          Copier après la connexion
         
        
        
         Copier après la connexion
        
       
       
        
         // demo.component.ts ngOnDestroy() { console.log('9. demo ngOnDestroy') }
         
          Copier après la connexion
         
        
        
         Copier après la connexion
        
       
       
       
        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!