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

我缺少什么？

更新
关于这个问题的更多解释： [1]我有user.component和user-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 应该是未定义的。

您必须确保将组件实例分配给 _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();
        }
    }
}

Angular2 ComponentRef TypeError：无法读取未定义

2 个答案: