web-dev-qa-db-fra.com

Comment supprimer un composant dynamiquement dans angular

J'ai parcouru angular chargement dynamique des composants. Mais je n'ai pas trouvé comment supprimer le composant dynamiquement.

Mon exigence est que l'application de chat charge un composant dynamique (image/graphique/liste/table) selon la conversation. Mais comment puis-je détruire le composant si la conversation avance.

J'essaie de détruire le composant dynamique avec un événement externe.

Veuillez aider comment procéder.

MODIFIER: https://stackblitz.com/angular/emjkxxxdxmk?file=src%2Fapp%2Fad-banner.component.ts

J'ai développé mon code selon cet exemple. Au lieu d'un intervalle de temps, je dois utiliser un appel d'API à partir d'un service auquel est abonné un autre composant (composant de chat).

Ci-dessous, la réponse de l'API peut charger le composant. Je cherche comment détruire le composant déjà chargé. J'utilise à nouveau l'appel de l'API.

public sendMessage(data): void {
    this.messages.Push(this.message);
    this.API.getResponse(data).subscribe(res => {
      this.previousContext = res.context;
      console.log('res', res);
      if (res.result.type == 'table') {
        this.DataService.setTrigger(new AdItem(Table2Component, res));
      }
      this.messages.Push(
        new Message(res.text, 'assets/images/bot.png', new Date(), 'chatbot')
      );
    });
    this.message = new Message('', 'assets/images/user.png', this.message.timestamp, 'user');
  }
angularangular-componentsangular-dynamic-components
5
Sridhar Natuva

Utilisez la méthode destroy ()

Détruit l'instance de composant et toutes les structures de données qui lui sont associées.

ref:ComponentRef<any>;
loadComponent() {
    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
    let adItem = this.ads[this.currentAdIndex];

    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);

    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    let componentRef = viewContainerRef.createComponent(componentFactory);
    this.ref=componentRef;
    (<AdComponent>componentRef.instance).data = adItem.data;

  }

  removeComponent(){
   try{
       this.ref.destroy();
   }
   catch(e){
   }
  }

Exemple: https://stackblitz.com/edit/destroy?file=src/app/ad-banner.component.ts

7
Chellappan வ