Différence entre constructeur et ngOnInit

Angular fournit un crochet de cycle de vie ngOnInit par défaut.

Pourquoi ngOnInit devrait- ngOnInit être utilisé si nous avons déjà un constructor ?

    Le Constructor est une méthode par défaut de la classe qui est exécutée lorsque la classe est instanciée et garantit une initialisation correcte des champs de la classe et de ses sous-classes. L’injecteur de dépendance angular ou mieux parsing les parameters du constructeur et lorsqu’il crée une nouvelle instance en appelant new MyClass() il essaie de trouver des fournisseurs qui correspondent aux types de parameters du constructeur, les résout et les transmet au constructeur comme

     new MyClass(someArg); 

    ngOnInit est un hook de cycle de vie appelé par Angular2 pour indiquer que Angular est créé pour créer le composant.

    Nous devons importer OnInit pour utiliser comme ça (en réalité, l’implémentation d’ OnInit n’est pas obligatoire mais considérée comme une bonne pratique):

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

    alors pour utiliser la méthode de OnInit nous devons implémenter dans la classe comme ceci.

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

    Implémentez cette interface pour exécuter une logique d’initialisation personnalisée après l’initialisation des propriétés liées aux données de votre directive. ngOnInit est appelé juste après que les propriétés liées à la directive aient été vérifiées pour la première fois et avant que l’un de ses enfants ait été vérifié. Il est appelé une seule fois lorsque la directive est instanciée.

    La plupart du temps, nous utilisons ngOnInit pour toutes les initialisations / déclarations et évitons les trucs à utiliser dans le constructeur. Le constructeur ne devrait être utilisé que pour initialiser les membres de la classe mais ne devrait pas faire de “travail” réel.

    Donc, vous devriez utiliser constructor() pour configurer l’dependency injection et pas grand chose d’autre. ngOnInit () est le meilleur endroit pour “démarrer” – c’est où / quand les liaisons des composants sont résolues.

    Pour plus d’informations, voir ici:

    Je pense que le meilleur exemple serait d’utiliser les services. Disons que je veux récupérer des données de mon serveur lorsque mon composant est activé. Disons que je veux aussi faire des choses supplémentaires avec les données après les avoir reçues du serveur, peut-être que j’obtiens une erreur et que je veux les enregistrer différemment.

    C’est vraiment facile avec ngOnInit sur un constructeur, cela limite également le nombre de calques de rappel que je dois append à mon application.

    Par exemple:

     export class Users implements OnInit{ user_list: Array; constructor(private _userService: UserService){ }; ngOnInit(){ this.getUsers(); }; getUsers(){ this._userService.getUsersFromService().subscribe(users => this.user_list = users); }; } 

    Avec mon constructeur, je pourrais simplement appeler mon _userService et remplir ma liste d’utilisateurs, mais peut-être que je veux faire des choses supplémentaires. Par exemple, assurez-vous que tout est supérieur, je ne suis pas tout à fait sûr de la manière dont mes données sont transmises.

    Donc, il est beaucoup plus facile d’utiliser ngOnInit.

     export class Users implements OnInit{ user_list: Array; constructor(private _userService: UserService){ }; ngOnInit(){ this.getUsers(); }; getUsers(){ this._userService.getUsersFromService().subscribe(users => this.user_list = users); this.user_list.toUpperCase(); }; } 

    Cela le rend beaucoup plus facile à voir et j’appelle donc ma fonction dans mon composant lorsque je m’initialise au lieu d’avoir à le chercher ailleurs. En réalité, c’est juste un autre outil que vous pouvez utiliser pour le rendre plus facile à lire et à utiliser à l’avenir. De plus, je trouve vraiment dommage de mettre des appels de fonctions dans un constructeur!

    L’article La différence essentielle entre Constructor et ngOnInit dans Angular explore la différence de multiples outlook. Cette réponse fournit l’explication de la différence la plus importante liée au processus d’initialisation du composant, qui montre également la différence d’utilisation.

    Le processus de bootstrap angular comprend les deux étapes principales:

    • construction de l’arborescence des composants
    • détection de changement en cours

    Le constructeur du composant est appelé lorsque Angular construit une arborescence de composants. Tous les hooks de cycle de vie sont appelés dans le cadre de la détection des modifications.

    Lorsque Angular construit une arborescence de composants, l’injecteur du module racine est déjà configuré pour vous permettre d’injecter des dépendances globales. De plus, lorsque Angular instancie une classe de composant enfant, l’injecteur du composant parent est également déjà configuré pour que vous puissiez injecter des fournisseurs définis sur le composant parent, y compris le composant parent. Les constructeurs de composants sont la seule méthode appelée dans le contexte de l’injecteur. Par conséquent, si vous avez besoin d’une dépendance, c’est le seul endroit pour obtenir ces dépendances.

    Lorsque Angular commence la détection des modifications, l’arborescence des composants est construite et les constructeurs de tous les composants de l’arborescence ont été appelés. De plus, les nœuds de gabarit de chaque composant sont ajoutés au DOM. Le mécanisme de communication @Input est traité lors de la détection des modifications. Vous ne pouvez donc pas vous attendre à ce que les propriétés soient disponibles dans le constructeur. Il sera disponible après ngOnInit .

    Voyons un exemple rapide. Supposons que vous ayez le modèle suivant:

       

    Donc, Angular commence à démarrer l’application. Comme je l’ai dit, il crée d’abord des classes pour chaque composant. Donc, il appelle le constructeur MyAppComponent . Il crée également un noeud DOM qui est l’élément hôte du composant my-app . Ensuite, il crée un élément hôte pour le constructeur child-comp et appelant ChildComponent . À ce stade, il ne s’agit pas vraiment de la liaison i input et des crochets du cycle de vie. Ainsi, lorsque ce processus est terminé, Angular se termine avec l’arborescence suivante des vues de composants:

     MyAppView - MyApp component instance - my-app host element data ChildCompnentView - ChildComponent component instance - child-comp host element data 

    Seulement alors exécute la détection des modifications et met à jour les liaisons pour la my-app et appelle ngOnInit sur la classe MyAppComponent. Ensuite, il procède à la mise à jour des liaisons pour le child-comp et appelle ngOnInit sur la classe ChildComponent.

    Vous pouvez faire votre logique d’initialisation dans le constructeur ou ngOnInit fonction de vos besoins. Par exemple, l’article Voici comment obtenir ViewContainerRef avant que la requête @ViewChild ne soit évaluée montre quel type de logique d’initialisation peut être requirejs dans le constructeur.

    Voici quelques articles qui vous aideront à mieux comprendre le sujet:

    • Tout ce que vous devez savoir sur la détection des changements dans Angular
    • Angular $ digest renaît dans la nouvelle version de Angular
    • La mécanique des mises à jour des propriétés dans Angular

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

    Le second correspond à un crochet de cycle de vie des composants Angular2:

    Cité sur le site web officiel d’angular:

    • ngOnChanges est appelé lorsqu’une valeur de liaison d’entrée ou de sortie change
    • ngOnInit est appelé après les premiers ngOnChanges

    Vous devriez donc utiliser ngOnInit si le traitement d’initialisation repose sur les liaisons du composant (par exemple les parameters de composant définis avec @Input ), sinon le constructeur suffirait …

    OK, tout d’abord, ngOnInit fait partie du cycle de vie angular , alors que constructor fait partie de la classe JavaScript ES6 , alors la différence majeure commence ici! …

    Regardez le tableau ci-dessous que j’ai créé et qui montre le cycle de vie d’angular.

    ngOnInit vs constructeur

    Dans Angular2 +, nous utilisons le constructor pour effectuer le DI(Dependency Injection) pour nous, tandis que dans Angular 1, cela se produit en appelant la méthode Ssortingng et en vérifiant quelle dépendance a été injectée.

    Comme vous le voyez dans le diagramme ci-dessus, ngOnInit se produit lorsque le constructeur est prêt et ngOnChnages et se déclenche une fois que le composant est prêt pour nous. Toute l’initialisation peut se produire à ce stade, un simple échantillon injecte un service et l’initialise sur init.

    OK, je partage aussi un exemple de code que vous pouvez regarder, voyez comment nous utilisons ngOnInit et le constructor dans le code ci-dessous:

     import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'my-app', template: `

    App is running!

    `, styles: ['h1 { font-weight: normal; }'] }) class ExampleComponent implements OnInit { constructor(private router: Router) {} //Dependency injection in the constructor // ngOnInit, get called after Component initialised! ngOnInit() { console.log('Component initialised!'); } }

    Une réponse courte et simple serait,

    Constructor : constructor est une default method s’exécute ( par sourd ) lors de la construction du composant. Lorsque vous créez an instance d’une classe à ce moment-là, le constructor(default method) serait également appelé. Donc, en d’autres termes, lorsque le composant est en cours de constructed or/and an instance is created constructor(default method) est appelé et le code approprié écrit est appelé. Fondamentalement et généralement dans Angular2 il était utilisé pour injecter des choses comme des services lorsque des composants étaient en cours de construction pour une utilisation ultérieure.

    OnInit : ngOnInit est le hook de cycle de vie du composant qui s’exécute d’abord après le constructor(default method) lorsque le composant est en cours d’initialisation.

    Ainsi, votre constructeur sera appelé en premier et Oninit sera appelé plus tard après la méthode constructeur.

    boot.ts

     import {Cmomponent, OnInit} from 'angular2/core'; import {ExternalService} from '../externalService'; export class app implements OnInit{ constructor(myService:ExternalService) { this.myService=myService; } ngOnInit(){ // this.myService.someMethod() } } 

    Ressources: Crochet LifeCycle

    Vous pouvez vérifier cette petite démo qui montre la mise en œuvre des deux choses.

    Pour tester cela, j’ai écrit ce code en empruntant le tutoriel NativeScript :

    user.ts

     export class User { email: ssortingng; password: ssortingng; lastLogin: Date; constructor(msg:ssortingng) { this.email = ""; this.password = ""; this.lastLogin = new Date(); console.log("*** User class constructor " + msg + " ***"); } Login() { } } 

    login.component.ts

     import {Component} from "@angular/core"; import {User} from "./../../shared/user/user" @Component({ selector: "login-component", templateUrl: "pages/login/login.html", styleUrls: ["pages/login/login-common.css", "pages/login/login.css"] }) export class LoginComponent { user: User = new User("property"); // ONE isLoggingIn:boolean; constructor() { this.user = new User("constructor"); // TWO console.log("*** Login Component Constructor ***"); } ngOnInit() { this.user = new User("ngOnInit"); // THREE this.user.Login(); this.isLoggingIn = true; console.log("*** Login Component ngOnInit ***"); } submit() { alert("You're using: " + this.user.email + " " + this.user.lastLogin); } toggleDisplay() { this.isLoggingIn = !this.isLoggingIn; } } 

    Sortie de la console

     JS: *** User class constructor property *** JS: *** User class constructor constructor *** JS: *** Login Component Constructor *** JS: *** User class constructor ngOnInit *** JS: *** Login Component ngOnInit *** 

    Je vais simplement append une chose importante qui a été ignorée dans les explications ci-dessus et expliquer quand vous devez utiliser ngOnInit .

    Si vous effectuez une manipulation du DOM du composant via, par exemple, ViewChildren , ContentChildren ou ElementRef , vos éléments natifs ne seront pas disponibles pendant la phase constructeur.

    Cependant, comme ngOnInit se produit une fois que le composant a été créé et que les vérifications ( ngOnChanges ) ont été appelées, vous pouvez accéder au DOM à ce stade.

     export class App implements OnInit { @ViewChild('myTemplate') myTemplate: TemplateRef; constructor(private elementRef: ElementRef) { // this.elementRef.nativeElement is undefined here // this.myTemplate is undefined here } ngOnInit() { // this.elementRef.nativeElement can be used from here on // this.myTemplate can be used from here on } } 

    Les réponses ci-dessus ne répondent pas vraiment à cet aspect de la question initiale: qu’est-ce qu’un crochet de cycle de vie? Il m’a fallu du temps pour comprendre ce que cela signifiait jusqu’à ce que j’y pense de cette façon.

    1) Dites que votre composant est un humain. Les humains ont des vies qui comprennent de nombreuses étapes de la vie, puis nous expirons.

    2) Notre composant humain pourrait avoir le script de cycle de vie suivant: Né, Bébé, École primaire, Jeune adulte, Adulte d’âge moyen, Adulte âgé, Mort, Disposition.

    3) Disons que vous voulez avoir une fonction pour créer des enfants. Pour éviter que cela ne devienne compliqué et plutôt humoristique, vous voulez que votre fonction ne soit appelée que pendant la phase Jeune adulte de la vie humaine. Vous développez donc un composant qui n’est actif que lorsque le composant parent est au stade Jeune adulte. Les crochets vous aident à le faire en signalant cette étape de la vie et en laissant votre composant agir.

    Truc amusant. Si vous laissez libre cours à votre imagination, cela devient compliqué et amusant.

    Comme beaucoup d’autres langages, vous pouvez initialiser des variables au niveau de la classe, du constructeur ou d’une méthode. Il appartient au développeur de décider de ce qui est le mieux dans leur cas particulier. Mais voici une liste des meilleures pratiques en matière de décision.

    Variables de niveau de classe

    Habituellement, vous déclarerez toutes vos variables ici qui seront utilisées dans le rest de votre composant. Vous pouvez les initialiser si la valeur ne dépend d’aucune autre chose, ou utiliser le mot clé const pour créer des constantes si elles ne changent pas.

     export class TestClass{ let varA: ssortingng = "hello"; } 

    Constructeur

    Normalement, il est recommandé de ne rien faire dans le constructeur et de ne l’utiliser que pour les classes qui seront injectées. La plupart du temps, votre constructeur devrait ressembler à ceci:

      constructor(private http: Http, private customService: CustomService) {} 

    Cela créera automatiquement les variables de niveau classe, vous aurez donc access à customService.myMethod() sans avoir à le faire manuellement.

    NgOnInit

    NgOnit est un hook de cycle de vie fourni par le framework Angular 2. Votre composant doit implémenter OnInit pour pouvoir l’utiliser. Ce hook de cycle de vie est appelé après l’appel du constructeur et toutes les variables sont initialisées. La majeure partie de votre initialisation devrait aller ici. Vous aurez la certitude qu’Angular a initialisé votre composant correctement et que vous pouvez commencer à faire la logique dont vous avez besoin dans OnInit plutôt que de faire les choses lorsque votre composant n’a pas fini de se charger correctement.

    Voici une image détaillant l’ordre de ce qui s’appelle:

    entrer la description de l'image ici

    https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

    TLDR

    Si vous utilisez le framework Angular 2 et que vous devez interagir avec certains événements du cycle de vie, utilisez les méthodes fournies par le framework pour éviter les problèmes.

    La principale différence entre constructeur et ngOnInit est que ngOnInit est ngOnInit cycle de vie et s’exécute après le constructeur. Les valeurs initiales du modèle et des valeurs initiales interpolées par composant ne sont pas disponibles dans constructeur, mais elles sont disponibles dans ngOnInit .

    La différence pratique réside dans la manière dont ngOnInit affecte la structure du code. La plupart des codes d’initialisation peuvent être déplacés vers ngOnInità condition que cela ne crée pas de conditions de ngOnInit .

    Constructeur antipattern

    Une quantité importante de code d’initialisation rend la méthode du constructeur difficile à étendre, à lire et à tester.

    Une recette habituelle pour séparer la logique d’initialisation du constructeur de classe consiste à la déplacer vers une autre méthode comme init :

     class Some { constructor() { this.init(); } init() {...} } 

    ngOnInit peut servir à cette fin dans les composants et les directives:

     constructor( public foo: Foo, /* verbose list of dependencies */ ) { // time-sensitive initialization code this.bar = foo.getBar(); } ngOnInit() { // rest of initialization code } 

    Injection de dépendance

    Le rôle principal des constructeurs de classes dans Angular est l’dependency injections. Les constructeurs sont également utilisés pour les annotations DI dans TypeScript. Presque toutes les dépendances sont affectées en tant que propriétés à une instance de classe.

    Le constructeur moyen de composant / directive est déjà assez grand car il peut avoir une signature multiligne en raison de dépendances, en mettant la logique d’initialisation inutile dans le corps du constructeur qui consortingbue à l’antipattern.

    Initialisation asynchrone

    Le constructeur d’initialisation asynchrone peut souvent être considéré comme antipattern et avoir une odeur car l’instanciation de classe se termine avant la routine asynchrone, ce qui peut créer des conditions de concurrence. Si ce n’est pas le cas, ngOnInit et les autres hooks de cycle de vie sont de meilleurs endroits pour cela, notamment parce qu’ils peuvent bénéficier de la syntaxe async :

     constructor( public foo: Foo, public errorHandler: ErrorHandler ) {} async ngOnInit() { try { await this.foo.getBar(); await this.foo.getBazThatDependsOnBar(); } catch (err) { this.errorHandler.handleError(err); } } 

    S’il existe des conditions de concurrence (y compris celle où un composant ne doit pas apparaître lors d’une erreur d’initialisation), une routine d’initialisation asynchrone doit avoir lieu avant l’instanciation du composant et être déplacée vers le composant parent, le garde de routeur, etc.

    Tests unitaires

    ngOnInit est plus flexible qu’un constructeur et offre certains avantages pour les tests unitaires qui sont expliqués en détail dans cette réponse .

    Considérant que ngOnInit n’est pas appelé automatiquement lors de la compilation des composants dans les tests unitaires, les méthodes appelées dans ngOnInit peuvent être ngOnInit ou ngOnInit après l’instanciation du composant.

    Dans des cas exceptionnels, ngOnInit peut être entièrement écrasé pour fournir une isolation aux autres composants (par exemple, certains modèles de logique).

    Héritage

    Les classes enfants ne peuvent qu’accroître les constructeurs, pas les remplacer.

    Comme this ne peut pas être référencé avant super() , cela place des ressortingctions sur la priorité d’initialisation.

    Considérant que la composante angular ou la directive utilise ngOnInit pour une logique d’initialisation non sensible au temps, les classes enfants peuvent choisir si super.ngOnInit() est appelée et quand:

     ngOnInit() { this.someMethod(); super.ngOnInit(); } 

    Ce serait impossible à mettre en œuvre avec le constructeur seul.

    Angular 2 Constructors: –

    1. Le constructeur est une méthode par défaut exécutée lors de la construction du composant.
    2. Le constructeur est une fonctionnalité typescripte et est utilisée uniquement pour une instanciation de classe et rien à voir avec Angular 2.
    3. Le constructeur a appelé la première fois avant le ngOnInit ().

    Angular 2 ngOnInit: –

    1. L’événement ngOnInit est une méthode d’événement de cycle de vie Angular 2 appelée après les premiers ngOnChanges et la méthode ngOnInit est utilisée pour les parameters définis avec @Input, sinon le constructeur est OK.

    2. Le ngOnInit est appelé après le constructeur et ngOnInit est appelé après le premier ngOnChanges.

    3. Le ngOnChanges est appelé lorsqu’une valeur de liaison d’entrée ou de sortie change.

    Le diagramme suivant explique le cycle de mensonge de Angular. De cela, vous pouvez avoir une idée de l’ordre dans lequel chacun est appelé.

    entrer la description de l'image ici

    Le constructeur est une méthode en JavaScript et est considéré comme une fonctionnalité de la classe dans es6. Lorsque la classe est instanciée, elle lance immédiatement le constructeur, qu’il soit utilisé dans le framework Angular ou non. Ainsi, il est appelé par le moteur JavaScript et Angular n’a pas de contrôle sur cela.

     import {Component} from '@angular/core'; @Component({}) class CONSTRUCTORTEST { //This is called by Javascript not the Angular. constructor(){ console.log("view constructor initialised"); } } 

    La classe “ConstructorTest” est instanciée ci-dessous, elle appelle donc en interne le constructeur (tout cela se passe par JavaScript (es6) pas angular).

     new CONSTRUCTORTEST(); 

    C’est pourquoi il existe un hook de cycle de vie ngOnInit dans les rendus Angular.ngOnInit lorsque Angular a fini d’initialiser le composant.

     import {Component} from '@angular/core'; @Component({}) class NGONINITTEST implements onInit{ constructor(){} //ngOnInit calls by Angular ngOnInit(){ console.log("Testing ngOnInit"); } } 

    Premièrement, nous instancions la classe comme ci-dessous, qui se produit lors des exécutions immédiates de la méthode constructeur.

     let instance = new NGONINITTEST(); 

    ngOnInit est appelé par Angular si nécessaire comme ci-dessous:

     instance.ngOnInit(); 

    Mais vous pouvez vous demander pourquoi nous utilisons le constructeur dans Angular?

    La réponse est des injections de dépendances . Comme mentionné précédemment, le constructeur appelle par le moteur JavaScript immédiatement lorsque la classe est instanciée (avant d’appeler ngOnInit par Angular), donc typos nous aide à obtenir le type des dépendances définies dans le constructeur et nous dit enfin Angulaire quel type de dépendances nous voulons utiliser dans ce composant spécifique.

    Deux choses à observer ici:

    1. Le constructeur est appelé chaque fois qu’un object est créé de cette classe.
    2. ngOnInit appelé une fois le composant créé.

    Les deux ont une utilisabilité différente.

    Les deux méthodes ont des objectives / responsabilités différents. La tâche du constructeur (qui est une fonctionnalité prise en charge par le langage) consiste à s’assurer que l’invariant de représentation est valide. Autrement dit, assurez-vous que l’instance est valide en donnant des valeurs correctes aux membres. Il appartient au développeur de décider ce que signifie «correct».

    La tâche de la méthode onInit () (qui est un concept angular) consiste à autoriser des invocations de méthode sur un object correct (invariant de représentation). Chaque méthode doit à son tour s’assurer que l’invariant de la représentation est valide lorsque la méthode se termine.

    Le constructeur doit être utilisé pour créer des objects “corrects”, la méthode onInit vous permet d’appeler des appels de méthode sur une instance bien définie.

    Constructeur: La méthode constructeur sur une classe ES6 (ou TypeScript dans ce cas) est une fonctionnalité d’une classe elle-même, plutôt qu’une fonction angular. Il est hors du contrôle d’Angular lorsque le constructeur est appelé, ce qui signifie que ce n’est pas un crochet approprié pour vous indiquer quand Angular a fini d’initialiser le composant. Le moteur JavaScript appelle le constructeur, pas directement Angular. C’est pourquoi le hook de cycle de vie ngOnInit (et $ onInit dans AngularJS) a été créé. Compte tenu de cela, il existe un scénario approprié pour utiliser le constructeur. C’est à ce moment que nous souhaitons utiliser l’dependency injection – essentiellement pour «câbler» les dépendances dans le composant.

    Comme le constructeur est initialisé par le moteur JavaScript et TypeScript nous permet d’indiquer à Angular les dépendances dont nous avons besoin pour être mappées sur une propriété spécifique.

    ngOnInit est purement là pour nous donner un signal que Angular a fini d’initialiser le composant.

    Cette phase inclut le premier passage à Change Detection par rapport aux propriétés que nous pouvons lier au composant lui-même, par exemple en utilisant un décorateur @Input ().

    De ce fait, les propriétés @Input () sont disponibles dans ngOnInit, mais ne sont pas définies dans le constructeur, par conception

    constructor () est la méthode par défaut du cycle de vie des composants et est utilisée pour l’dependency injections. Le constructeur est une fonctionnalité de type script.

    ngOnInit () est appelé après le constructeur et ngOnInit est appelé après le premier ngOnChanges.

    ie constructeur () -> ngOnChanges () -> ngOnInit ()

    Comme mentionné ci-dessus, ngOnChanges () est appelée lorsqu’une valeur de liaison d’entrée ou de sortie change.

    constructor() est utilisé pour faire l’dependency injection.

    ngOnInit() , ngOnChanges() et ngOnDestroy() etc. sont des méthodes de cycle de vie. ngOnChanges() sera le premier à être appelé, avant ngOnInit() , lorsque la valeur d’une propriété liée change, il ne sera PAS appelé s’il n’y a pas de changement. ngOnDestroy() est appelé lorsque le composant est supprimé. Pour l’utiliser, OnDestroy doit être implement par la classe.

    Dans les cycles de vie angulars

    1) Injecteur angular détecte le paramètre constructeur et instancie la classe.

    2) Prochain cycle de vie angular

    Crochets angulars de cycle de vie

    ngOnChanges -> Appel dans la liaison des parameters de la directive.

    ngOnInit -> Démarrer le rendu angular …

    Appelez une autre méthode avec l’état du cycle de vie angular.