Angular2 ComponentRef TypeError : 정의되지 않은 'destroy'속성을 읽을 수 없습니다.

Question

동적으로 구성 요소를로드하고 있으며이를 파손시킬 수있는 것과는 별개로 작동합니다. 동적

import { Component, ElementRef, ComponentRef } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-user-list', 
    templateUrl: 'user-list.component.html', 
}) 
export class UserListComponent { 
    _componentRef: ComponentRef<any>; 

    constructor(private _elementRef: ElementRef) {} 
    removeComponent() 
    { 
     this._componentRef.destroy(); 
    } 
} 

그리고이 구성 요소의 HTML에서

를로드되고

내 구성 요소가 나는 경우 removeComponent() 화재를 제거하는 단지 버튼, 그러나

<button (click)="removeComponent()">Remove Component</button> 

같은 것을 가지고 오류가 발생했습니다

TypeError: Cannot read property 'destroy' of undefined 

내가 무엇을 놓치고 있습니까? 문제에 대한

UPDATE
더 설명 : [1] 내가 user.component 및 사용자 list.component 있습니다. [2] user.component에 user-list.component를 호출하는 버튼이 있습니다. [3]이 버튼을 클릭하면 user-list.component가 작동중인 특정 영역에로드됩니다. [4] user-list.component에 동적으로로드 된이 구성 요소를 닫을 수있는 버튼이 있습니다. [5]이 버튼을 클릭하면 user-list.component를 삭제해야합니다.

UserComponent

import { Component, DynamicComponentLoader, Injector, ApplicationRef } from '@angular/core'; 

import { UserListComponent } from "../user-list/user-list.component"; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-users', 
    templateUrl: 'users.component.html', 
    styleUrls: ['users.component.css'], 
    directives: [TestComponent, CreateUserForm] 
}) 
export class UsersComponent implements OnInit, AfterViewInit { 

    public constructor(
     private _dcl: DynamicComponentLoader, 
     private _injector: Injector, 
     private _appRef: ApplicationRef 
    ){} 

    loadUserList() 
    { 
     this._dcl.loadAsRoot(UserListComponent, '#user-list', this._injector) 
      .then((compRef: ComponentRef<UserListComponent>) => { 
       (<any>this._appRef)._loadComponent(compRef); 

       return compRef; 
      }); 

    } 

} 

그러나, 동적으로 그 방법이 사용되지 않습니다로드하는 구성 요소를 들었습니다. ComponentResolver와 ViewContainerRef를 사용해야합니다. 그게 맞습니까?

Answer 1

this._componentRef은 귀하의 경우에 정의되어 있지 않아야합니다.

당신은

dcl.loadNextToLocation(UserListComponent, viewContainerRef) //<----this line... whatever it is in your case 
.then((ref) => { 
     ref.instance._componentRef = ref;      //<----this assignment is required 
     ... 
}); 

이 그럼 당신은 확실히 그것을 파괴 할 수있을 것입니다, 당신은 _componentRef에 구성 요소 인스턴스를 할당하는 것이 있는지 확인해야합니다.

Answer 2

당신은 그것을 파괴하기 전에 체크를 할 필요가 : 당신이 정의되지 않은 이유 그건`_componentRef`, 어떤 값을 할당하지 않을

import { Component, ElementRef, ComponentRef } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-user-list', 
    templateUrl: 'user-list.component.html', 
}) 
export class UserListComponent { 
    _componentRef: ComponentRef<any>; 

    constructor(private _elementRef: ElementRef) { } 
    removeComponent() { 
     if (this._componentRef) { 
      this._componentRef.destroy(); 
     } 
    } 
}