web-dev-qa-db-fra.com

Angular 2 Constructeur de composant contre OnInit

Si je veux que la fonction x se produise à chaque chargement d'un composant, que ce soit la première fois, je navigue vers un site différent et revenir en arrière, ou bien c'est la cinquième fois que le composant est chargé.

Que dois-je mettre la fonction x dans? Le constructeur du composant ou OnInit?

angularconstructorngoninit
87
ClickThisNick

Le constructeur est une méthode par défaut prédéfinie de la classe TypeScript. Il n'y a pas de relation entre Angular et constructor. Normalement, nous utilisons constructor pour définir/initialiser certaines variables, mais lorsque nous avons des tâches liées aux liaisons d'Angular, nous passons au hook de cycle de vie ngOnInit d'Angular. ngOnInit est appelé juste après l'appel du constructeur. Nous pouvons également faire le même travail dans le constructeur, mais il est préférable d’utiliser ngOnInit pour démarrer la liaison d’Angular.

pour utiliser ngOnInit, nous devons importer ce hook depuis la bibliothèque principale:

import {Component, OnInit} from '@angular/core'

Ensuite, nous implémentons cette interface avec la classe exportée (ce n’est pas obligatoire, mais nous l’avons généralement fait).

Exemple d'utilisation des deux:

export class App implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}

Pour plus de détails, voir aussi Différence entre Constructor et ngOnInit

99
Pardeep Jain

Le premier (constructeur) est lié à l'instanciation de classe et n'a rien à voir avec Angular2. Je veux dire un constructeur peut être utilisé sur n'importe quelle classe. Vous pouvez y mettre un certain traitement d'initialisation pour l'instance nouvellement créée.

Le second correspond à un hook de cycle de vie de composants Angular2:

  • ngOnChanges est appelé lorsqu'une valeur de liaison d'entrée ou de sortie change
  • ngOnInit est appelé après le premier ngOnChanges

Donc, vous devriez utiliser ngOnInit si le traitement d'initialisation de votre fonction repose sur des liaisons du composant (par exemple, les paramètres de composant définis avec @Input), sinon le constructeur suffirait ...

29
Thierry Templier

constructor() est une fonctionnalité TypeScript et est appelé pour new SomeClass(). Le constructeur assure l'ordre d'initialisation de champ approprié dans les hiérarchies de classes.

ngOnInit est une méthode de cycle de vie Angular2 appelée par Angular lorsque la construction du composant est terminée, après avoir évalué les liaisons et mis à jour les entrées pour la première fois.

Voir aussi Différence entre Constructor et ngOnInit

24
Günter Zöchbauer