Angulaire 2 - détruire composant enfant

Je suis en commençant par Angulaire 2, j'ai un enfant de la composante "ChildCmp" initialisé et après j'ai besoin de détruire le composant par l'intermédiaire d'un clic, disons:

@Component({
selector: 'main-cmp',
templateUrl: './main-cmp.html',
directives: [ChildCmp]
})
class MainCmp {
    @ViewChild(ChildCmp)
    childCmp: ChildCmp;
    destroyChildClick(){
        this.childCmp.destroy();
    }
}

mais le code précédent ne fonctionne pas, destroy() n'est pas défini et l'exception est la suivante:

TypeError: ce.childCmp.détruire n'est pas une fonction

J'ai lu ce fil et il y a à l'aide de ViewContainerRef.createComponent(), le composant créé avec c'est une instance de "ComponentRef", mais le childCmp n'avons pas de "ComponentRef" la mise en œuvre.

Comment je peux le mettre en œuvre ou d'injecter de la méthode destroy?

Merci pour tout!

  • montrer où et comment créer un composant?
  • Pourquoi détruire quand vous pouvez juste *ngIf?
  • J'ai été la création de composants dynamiquement à l'aide de ViewContainerRef.createComponent(), d'autres sont créés à partir d'un modèle, donc je suis exigeant un seul formulaire pour les détruire.
  • ChildCmp ne pas avoir quelque chose de spécial, MainCmp est passé à bootstrap méthode, la seule chose que je veux, c'est le feu des événements lorsque je détruis composant (jeter des objets et éviter les fuites de mémoire).
  • De cette façon, vous ne pouvez pas détruire. vous pouvez détruire une instance d'un composant créé avec viewContainerRef.createComponent().Donc, encore une fois demander comment avez-vous créer?
  • Je suis de la création de composants par le biais de deux manières, l'une est à l'aide de gabarit html <main-cmp><child-cmp></child-cmp></main-cmp> (au chargement de la page), et de deux, c'est à l'aide de viewContainerRef.createComponent() (en cliquant sur les boutons).
  • Je veux détruire ChildCmp et de l'hôte à un autre composant, CousinCmp au même endroit, la première ChildCmp pourrait être SonCmp ou tout autre.
  • Si vous créez à l'aide de viewContainerRef.createComponent() vous pouvez destory il, comme déjà mentionné. Voir stackoverflow.com/questions/36325212/... pour un exemple (avec Plunker)
  • C'est correct, je peux détruire le composant à l'aide de ComponentRef.destroy() et c'est déjà fait (en cliquant sur les boutons), mais le premier enfant composant (créé par modèle) n'a pas de détruire()
  • C'est le point. Vous ne pouvez pas détruire.

InformationsquelleAutor Alexander | 2016-07-30
  1. 4

    Essayer cette

    export class MainCmp {

   @ViewChild(ChildCmp) childRef: ChildCmp;

   destroyClick() {

      if (this.childRef) {
         this.childRef.destroy();
      }
   }
}
    • qui n'a pas de sens.
    • Je ne pense pas que cela répond OP question. Aussi, ce qui est écrit ici n'a pas de sens pour moi. Les composants enfants sont détruits lorsque le parent est détruit de toute façon. Peu importe si this.childRef.destroy() fonctionne ou pas, vous êtes essentiellement appel pour l'enfant d'être détruit juste avant qu'il n'aurait de toute façon été détruit.
    • Pas de corps, il dit que vous avez besoin de détruire l'enfant à la main, mais on peut vouloir détruire l'enfant pour beaucoup de différents cas d'utilisation. Que faire si vous voulez garder la mère et de détruire l'enfant?
    • OP demandé de détruire l'enfant manuellement: "détruire le composant par l'intermédiaire d'un clic". Si tu sous-entends que votre code vous permet de garder la mère et de détruire l'enfant, je suis en désaccord. Votre code s'exécute this.childRef.destroy() uniquement lorsque MainCmp est détruit.
    • J'ai juste renommé ngOnDestroy() à destroyClick() l'important, c'est comment le détruire manuellement à partir de la composante de code
    InformationsquelleAutor Murhaf Sousli