Angular2 ComponentRef TypeError: Не удается прочитать свойство «destroy» undefined

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 этого компонента у меня есть только кнопку, чтобы удалить его, что-то, как это

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

Однако, когда removeComponent() пожары была произведена ошибка

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.com должен быть уничтожен.

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

этот._componentRef должен быть не определен в вашем случае.

вы должны убедиться, что вы назначаете экземпляр компонента для _componentRef,

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

Тогда вы сможете уничтожить его наверняка.

Answer 2

Вам нужно сделать проверку, прежде чем уничтожить его:

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(); 
     } 
    } 
}