Angular2 ComponentRef TypeError：无法读取未定义的属性“销毁”答案

【问题标题】：Angular2 ComponentRef TypeError: Cannot read property 'destroy' of undefinedAngular2 ComponentRef TypeError：无法读取未定义的属性“销毁”
【发布时间】：2016-07-29 06:36:24
【问题描述】：

我正在动态加载一个组件，它工作正常，除了我可以让它被销毁。

我正在动态加载的组件

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

我错过了什么？

更新
关于这个问题的更多解释： [1] 我有 user.component 和 user-list.component。 [2] user.component中有一个按钮调用user-list.component [3] 单击此按钮时，user-list.component 应加载到特定区域，这是有效的。 [4] user-list.component中有一个按钮可以关闭这个动态加载的组件。 [5] 当这个按钮被点击时，user-list.component 应该被销毁。

用户组件

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。对吗？

【问题讨论】：

您没有为_componentRef 分配任何值，这就是它未定义的原因。顺便说一句，“动态加载”是什么意思？
请用完整代码更新您的问题。
看看medium.com/tixdo-labs/…，它展示了如何获得ComponentRef
大家好，我刚刚更新了我的问题。如果还不清楚，请告诉我
DCL 已弃用。请改用ViewContainerRef.createComponent()。有关示例，请参见 stackoverflow.com/questions/36325212/…。

标签： typescript angular angular2-components

【解决方案1】：

this._componentRef 在您的情况下应该是未定义的。

您必须确保将组件实例分配给 _componentRef，

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

那你肯定能毁掉它。

【讨论】：

我无法使用 loadNextToLocation，因为我需要在特定位置加载！
无论如何，我已经添加了这个引用实例并且组件正在被删除，但是我收到了这个错误：zone.js:260 Uncaught Attempt to use a destroyed view:detectChanges。另外，我无法再次加载组件！

【解决方案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();
        }
    }
}

【讨论】：