javascript - Angular 2 组件工厂解析器辅助函数

Question

我使用组件工厂解析器已经有一段时间了，虽然我认为它非常流畅，但有一件事让我抓狂。我很乐意将大部分重复代码包装到呈现组件的辅助函数中。

就我而言，我有一个仪表板组件，我们通过更改单例服务来触发可见性或不触发可见性来呈现相当多不同的组件。我想知道是否有人成功创建了一个类似帮助器的函数，可以将一些变量传递到其中以实现相同的效果，从而消除大量重复代码，而不是拥有大量这些创建组件代码块。

下面是我对辅助函数的尝试以及激活它的调用。组件已创建，但销毁功能不起作用。我已将其范围缩小到组件引用，但实际上并未保存到全局可访问的组件中。有没有办法在全局数组中存储组件引用？如果是这样，您将如何在添加/销毁组件时动态访问它们？

ngOnInit 内的订阅

    // Subscribe to Create User Modal Visibility
    this._ComponentVisibilityService.createUserVisibility$.subscribe(
        _createUserVisibility => {

            this.renderComponent(
                this.createUserModal,
                CreateUserComponent,
                this.createUserModalContainer,
                _createUserVisibility
            )
        }
    )

仪表板组件内的功能

renderComponent(component, template, container, visibility) {

        if (visibility) {
            // Destroy previously built components if not already destroyed
            if (component) component.destroy();
            // Generate component factory
            const componentFactory = this._ComponentFactoryResolver.resolveComponentFactory(template);
            // Render the component
            component = container.createComponent(componentFactory);

        } else {
            // Destroy the component if visibility is false
            if (component) component.destroy()
        }

    }

Answer 1

所以昨晚做了一些挖掘，发现 Typescript 认为 any成为基本(原始)类型。因此，据我所知，component 没有任何方法或结构可用。 ，除非更改为不适合“基本”类别，否则它作为值而不是引用传递。然而，就像在 javascript 中一样，对象不被视为原始类型，因此我重构了组件变量，将其强制转换为具有属性 component 的对象。如ComponentRef<any> ，并且成功了!

组件属性声明

createUserModal: { component: ComponentRef<any> } = { component: null }

函数声明

renderModal(component: { component: ComponentRef<any> }, template, container, visibility) {
    // Create Component...
}

此组合允许对象作为引用传入，从而允许函数更改 DashboardComponent 的值属性(property)this.createUserModal ，这又允许正常调用其上的所有方法。