web-dev-qa-db-ja.com

angularでコンポーネントを動的に削除する方法

angularコンポーネントを動的にロードしました。しかし、コンポーネントを動的に削除する方法を見つけることができませんでした。

私の要件は、チャットアプリケーションが会話ごとに動的コンポーネント（image/graph/list/table）をロードすることです。しかし、会話が進んだ場合、どうすればコンポーネントを破棄できますか？.

外部イベントで動的コンポーネントを破壊しようとしています。

進め方を手伝ってください。

編集： 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');
  }
angularangular-componentsangular-dynamic-components
5
Sridhar Natuva

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

7
Chellappan வ