Une plongée approfondie dans les hooks de cycle de vie dans les composants angulaires

Cet article vous guidera à travers le crochet du cycle de vie des composants Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Crochet de cycle de vie des composants angulaires

---

Parmi eux, la vie marquée en rouge Le cycle hook n'est appelé qu'une seule fois, la partie verte sera appelée à plusieurs reprises et l'ordre d'exécution est de haut en bas.

ngOnChanges

Lorsque Angular définit la propriété d'entrée de liaison de données pour qu'elle réponde lorsqu'elle change, elle ne fonctionne que sur l'objet immuable d'entrée . Pour faire simple, ngOnChanges est appelé lorsque les attributs de la balise @Input changent, et ngOnChanges n'est pas appelé lorsque les attributs de la balise non-@Input changent.

ngOnInit

est appelé après la première exécution de ngOnChanges et n'est appelé qu'une seule fois. Il est principalement utilisé pour effectuer d'autres opérations d'initialisation du composant ou obtenir les valeurs d'attribut de l'entrée du composant.

ngDoCheck

Lorsque l'attribut d'entrée du composant change, la méthode ngDoCheck sera déclenchée Nous pouvons utiliser cette méthode pour personnaliser notre détection. logique. [Recommandations associées : "Tutoriel angulaire"]

Remarque : Ne faites pas de choses très compliquées dans ngDoCheck et définissez la position de vérification avec plus de précision lorsque vous l'utilisez, sinon Peut entraîner des problèmes de performances. Parce que tout changement, tel qu'un événement de clic de souris ou un événement de saisie au clavier, déclenchera ngDoCheck.

Détection des changements

Stratégie de détection des changements

• Stratégie par défaut
  Lorsqu'un composant de l'arborescence des composants change, l'intégralité de l'arborescence des composants sera détectée.

• Stratégie onPush
  Lorsqu'un composant change, si ses composants enfants utilisent la stratégie onPush, il ne sera pas détecté. La détection n'est effectuée que lorsque la propriété d'entrée @Input du composant enfant change.

ngAfterViewInit et ngAfterViewChecked

ngAfterViewInit et ngAfterViewChecked seront assemblés une fois que tout le contenu du modèle du composant aura été assemblé et que le modèle du composant aura été assemblé. été présenté à l'utilisateur est déclenché plus tard, le processus d'assemblage se déroule séquentiellement du composant enfant au composant parent et ngAfterViewInit est déclenché avant ngAfterViewChecked.

Le hook ngAfterViewInit ne sera déclenché qu'une seule fois après l'initialisation du composant, tandis que le hook ngAfterViewChecked sera déclenché à chaque fois que le composant change, la mise en œuvre de ce hook doit donc être rationalisée, sinon cela entraînera des problèmes de performances.

Vous ne pouvez pas modifier les propriétés liées sur le composant dans ces deux hooks, sinon une exception sera levée.

@ViewChild décorateur et élément ElementRef, veuillez vous référer à

Dans les applications réelles, les éléments DOM de la couche de vue peuvent être obtenus via ces deux éléments, et le résultat obtenu Les éléments DOM peuvent être traités et exploités.

// .ts 文件中声明
@ViewChild('inputElem')
inputElem: ElementRef;
// 获取Dom元素的值
const value = this.inputElem.nativeElement.value;

// .html 文件中使用
<input nz-input type="text" #inputElem>

ngAfterContentInit et ngAfterContentChecked

Ces deux hooks sont exécutés une fois le contenu de la projection assemblé, et l'ensemble du modèle n'a pas été assemblé à ce moment-là time Completed, les propriétés liées peuvent donc être modifiées dans ces deux hooks.

Projection

Dans certains cas, il est nécessaire de modifier dynamiquement le contenu des modèles de composants, et ces contenus n'ont pas de logique métier complexe et n'ont pas besoin d'être réutilisé, juste un petit Pour certains fragments HTML, vous pouvez utiliser une fonctionnalité fournie par Angular appelée projection. Dans Angular, vous pouvez utiliser la directive ng-content pour projeter n'importe quel fragment du modèle de composant parent vers ses composants enfants.

Il convient de noter que d'autres balises ne peuvent pas être imbriquées dans les balises des composants personnalisés. Ce n'est pas comme les balises HTML ordinaires qui peuvent être imbriquées, mais la projection peut être utilisée pour réaliser l'imbrication.

app.component.html

<div class="wrapper">
  <h1>我是父组件</h1>
  <div>这个 div 定义在父组件</div>
  <!-- 将要投影的内容写在子组件的标签之间 -->
  <app-child>
    <div class="header">这个是页头。这个 div 是父组件投影到子组件的。</div>
    <div class="footer">这个是页脚。</div>
  </app-child>
</div>

child.component.html

<div class="wrapper">
  <h1>这是子组件</h1>
  <!-- ng-content是投影点 -->
  <ng-content select=".header"></ng-content>
  <div>这个div定义在子组件中</div>
  <ng-content select=".footer"></ng-content>
</div>

Parmi eux, utilisez le select attribut. Activer la projection de contenu ciblé. Cependant, il convient de noter que le nœud label spécifié par la valeur correspondant à l'attribut select doit être le nœud enfant direct de sous le composant. Sinon, l'attribut select n'a aucun effet.

Résumé des hooks ngAfterContentInit et ngAfterContentChecked

• ngAfterContentInit et ngAfterContentChecked ne seront pas appelés tant que le contenu ne sera pas projeté par le composant est assemblé, ngAfterContentInit est déclenché avant ngAfterContentChecked.

• Si le composant a des sous-composants, les deux hooks du composant parent sont déclenchés en premier, et les deux hooks du sous-composant sont déclenchés après l'assemblage du contenu de projection du composant parent.

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!