web-dev-qa-db-fra.com

Comment implémenter plusieurs hooks de cycle de vie pour un composant Angular2?

Je sais que lorsque vous définissez des composants dans Angular2, vous avez plusieurs types de crochets de cycle de vie que vous pouvez implémenter tels que OnDestroy, NgOnInit, etc.

Dans chaque exemple de code que j'ai vu en ligne sur l'utilisation de ces crochets, je ne les vois jamais être utilisés un à la fois. Par exemple

export class ModalComponent implements OnDestroy { ... }

ou

export class ModalComponent implements OnChanges { ... }

Mais que se passe-t-il si vous souhaitez utiliser plusieurs pour un seul composant? Par exemple, que faire si vous souhaitez un comportement spécifique pour OnChanges ET OnDestroy? J'ai essayé ce qui suit:

export class ModalComponent implements OnChanges implements OnDestroy{ ... } 
export class ModalComponent implements OnChanges, OnDestroy { ... } 
export class ModalComponent implements [OnChanges, OnDestroy] { ... } 
export class ModalComponent implements OnChanges and OnDestroy { ... }

Je suis certain que la réponse est très simple, mais j'ai beaucoup de mal à trouver une réponse à cela.

Merci d'avance!

angularlifecycle-hook
19
SemperCallide

Vous pouvez étendre 1 classe et implémenter plusieurs interfaces. Les crochets du cycle de vie sont des interfaces.

class D extends C implements A, B{}
31
A. Tim

Vous aviez probablement raison lorsque vous avez implémenté deux interfaces avec un séparateur de virgules.

Voici un exemple.

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


@Component({
  selector: 'app-ram-component',
  templateUrl: './ram.component.html',
  styleUrls: ['./ram.component.css']
})

export class RamComponentComponent implements OnInit,OnDestroy,AfterViewInit { 

  constructor() { }

  ngOnInit() {
    console.log('On Init');
  }
  ngAfterViewInit(){
    console.log('after view');
  }
  ngOnDestroy(){
    console.log('destroyed!!');
  }
}

Veuillez noter que la déclaration d'importation doit inclure tous les crochets de cycle de vie nécessaires.

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

Référence des crochets du cycle de vie

6
Ram Kishore K