0

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

我正在动态加载的组件

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。那正确吗？

4

2 回答 2

0

您需要在销毁它之前进行检查：

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();
        }
    }
}
于 2016-07-29T07:30:17.590 回答
0

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

然后你就可以肯定地摧毁它。

于 2016-07-29T07:17:15.500 回答