Как удалить компонент динамически в angular

Я прошел через angular динамически загружаемые компоненты. Но я не мог найти, как удалить компонент динамически.

Мое требование состоит в том, чтобы приложение чата загружало динамический компонент (изображение / график / список / таблица) в соответствии с беседой. Но как я могу уничтожить компонент, если разговор продвигается вперед.

Я пытаюсь разрушить динамический компонент внешним событием.

Пожалуйста, помогите, как действовать.

РЕДАКТИРОВАТЬ: https://stackblitz.com/angular/emjkxxxdxmk?file=src%2Fapp%2Fad-banner.component.ts

Я разработал свой код по этому примеру. Вместо временного интервала мне нужно использовать вызов API из службы, на которую подписан другой компонент (компонент чата).

Ниже ответ API может загрузить компонент. Я ищу, как уничтожить уже загруженный компонент, я снова использую вызов 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');
  }

angular angular-components angular-dynamic-components
person Sridhar Natuva    schedule 16.09.2018    source источник
comment
Пожалуйста, предоставьте код, чтобы мы могли проследить ваши шаги.   -  person Batajus    schedule 16.09.2018

Ответы (1)


arrow_upward
9
arrow_downward

Используйте метод destroy ()

Уничтожает экземпляр компонента и все связанные с ним структуры данных.

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){
   }
  }

Пример: https://stackblitz.com/edit/destroy?file=src/app/ad-banner.component.ts

person Chellappan வ    schedule 16.09.2018
comment
когда мне вызвать этот метод? Работает, только если компонент выходит. Если компонент не закрывается, ref.destroy () показывает ошибку. Я пробовал использовать приведенный ниже код ... но это не сработало. if(this.ref!=null){this.ref.destroy();} - person Sridhar Natuva; 16.09.2018
comment
почему вы хотите уничтожить, если нет компонента - person Chellappan வ; 16.09.2018
comment
Если нет компонента ... он не должен выполнять эту строку ... я не могу поставить там условие if. this.ref показывает undefined, когда я использую console.log (). Пожалуйста, помогите с условием if .., оно показывает undefined .. - person Sridhar Natuva; 16.09.2018
comment
вместо использования, попробуйте поймать - person Chellappan வ; 16.09.2018