Angular 2 - 破坏子组件

Question

I am starting with Angular 2, I have a child component "ChildCmp" initialized and after I need destroy component through a click, let say:

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

but the previous code doesn't run, destroy() is undefined and exception is:

TypeError: this.childCmp.destroy is not a function

I have read this thread and there are using ViewContainerRef.createComponent() , the component created with this is an instance of "ComponentRef" , but the childCmp doesn't have "ComponentRef" implementation.

How I can implement or inject the destroy method?

Thanks for all!

Answer 1

Try this

export class MainCmp {

   @ViewChild(ChildCmp) childRef: ChildCmp;

   destroyClick() {

      if (this.childRef) {
         this.childRef.destroy();
      }
   }
}