[ANGULAR] Angular2에서 DynamicComponentLoader를 사용하여 생성 된 모든 구성 요소를 파괴하는 방법은 무엇입니까?

Angular2에서 DynamicComponentLoader를 사용하여 생성 된 모든 구성 요소를 파괴하는 방법은 무엇입니까?

해결법

1. ---

   1.수행하는 방법을 묻는 가장 간단한 방법은 구성 요소를 추가 할 때 컴퍼넌트 Ref를 추적하고 루프에서 폐기물 ()을 호출하는 것입니다. 업데이트 된 펑크를 참조하십시오

   수행하는 방법을 묻는 가장 간단한 방법은 구성 요소를 추가 할 때 컴퍼넌트 Ref를 추적하고 루프에서 폐기물 ()을 호출하는 것입니다. 업데이트 된 펑크를 참조하십시오

   export class App {
     ...
     private _children:ComponentRef[] = [];
   
     add() {
       this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => {
         ...
         this._children.push(ref);
       });
     }
   
     removeall(){
       this._children.forEach(cmp=>cmp.dispose());
       this._children = []; // not even necessary to get the components off the screen
     }
   }
   

   어떤 이유로 뭔가가 폐기 ()를 한 번만 호출하는 것이 중요합니다. "컨테이너"를 만들고 해당 DynamicComponents를 그 자식으로 추가 한 다음 자동으로 자식을 처분하고 컨테이너를 처분 할 수 있습니다.

   그 말로, 나는 위에서 설명한 것을 구현하는 데 필요한 코드의 네 줄을 추가하는 것을 더 좋아하는 상황을 상상할 수 없다고 말했습니다 ...

   그 모든 것을 말했습니다 : 당신이하려는 것을하기 위해 데이터를 바인딩하는 방법이있는 경우, 망할 이유가 아닌 한 DynamiccomPonentLoader에 뒤로 떨어지는 것을 반드시 호의를 베풀어야합니다.

   DCL이 필요할 때 사용 사례가 있지만, 나의 (아직 간단한) 경험에서 당신에게 처음에 알려주는 것이 가장 좋습니다. 조금 생각을주는 것.

   이 경우, 그 일을하는 것은 사소한 것입니다 - 다른 업데이트 된 펑크를보십시오 :

   @Component({
     selector: 'my-app',
     template : `
       <button (click)="add()">Add new component</button>
       <button (click)="removeAll()">Remove All</button>
       <template ngFor #child [ngForOf]="children">
          <div [dynamicCmp]="child"></div>
       </template>
     `,
     directives:[DynamicCmp]
   })
   export class App {
     children:number[] = [];
   
     add() {
       this.children.push(this.children.length+1);
     }
   
     removeAll(){
       this.children = [];
     }
   
   }
   

from https://stackoverflow.com/questions/34585357/how-to-destroy-all-the-components-created-using-dynamiccomponentloader-in-angula by cc-by-sa and MIT license