Javascript 角度2分量工厂分解器辅助函数

我已经使用组件工厂解析器有一段时间了，虽然我认为它非常灵活，但有一件事让我发疯。我希望将大部分重复的代码封装到一个呈现组件的助手函数中

在我的例子中，我有一个仪表板组件，我们通过改变单例服务来触发可见性或不触发可见性来呈现许多不同的组件。我想知道是否有人已经成功地创建了一个类似助手的函数，可以将几个变量传递到该函数中以达到相同的效果，从而消除了大量重复代码，而不是创建大量的组件代码块

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

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

    }

仪表板组件内的功能

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

    }

---

所以昨晚做了一些挖掘，发现Typescript认为

any

是一种基本（原始）类型。因此，从我所知道的，没有任何方法或结构可用于

组件

，除非修改为不适合“基本”类别，否则它将作为值而不是引用传递。但是，像在javascript中一样，对象不被视为基本类型，因此我重构了组件变量，将其转换为具有属性

component

的对象，并将其转换为

ComponentRef

，它成功了

组件属性声明

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

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

createUserModal:{component:ComponentRef}={component:null}

功能声明

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

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

renderModal（组件：{component:ComponentRef}，模板，容器，可见性）{
//创建组件。。。
}

---

此组合允许对象作为引用传入，从而允许函数更改

仪表板组件

属性

This.createUserModal

的值，这反过来又允许对它正常调用所有的方法。

因此昨晚进行了一些挖掘，发现Typescript将

any

视为基本（原始）类型。因此，从我所知道的，没有任何方法或结构可用于

组件

，除非修改为不适合“基本”类别，否则它将作为值而不是引用传递。但是，像在javascript中一样，对象不被视为基本类型，因此我重构了组件变量，将其转换为具有属性

component

的对象，并将其转换为

ComponentRef

，它成功了

组件属性声明

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

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

createUserModal:{component:ComponentRef}={component:null}

功能声明

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

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

renderModal（组件：{component:ComponentRef}，模板，容器，可见性）{
//创建组件。。。
}

---

此组合允许对象作为引用传入，从而允许函数更改

仪表板组件

属性

This.createUserModal

的值，这反过来又允许对其正常调用所有方法。

我认为您使用与renderComponent相同的逻辑创建了

this.createUserModal

。不是吗？如果不是，那么

this.createUserModal

来自何处？

this.createUserModal

只是仪表板组件中的一个全局变量。传统上，这将是存储从

createComponent

返回的组件的地方，然后调用

this.createUserModal.destroy（）

来处理它。我看到的问题（这是有意义的）是，将

createComponent

保存到函数作用域变量基本上会在函数退出后使引用为null。因此，我想真正的问题是将组件引用保存在何处，以便它们可以在以后进行战略性交互。我认为，如果将

createUserModal:ComponentRef

保存为

仪表板组件

属性，则不会有任何错误，它应该允许您在以后处理它，我在项目中使用相同的方法。正如我所说的，如果我像上面所说的那样直接将其保存到DashboardComponent属性中，它就会起作用。问题是当我尝试实现helper函数时。让我问一下：当我将

this.createUserModal

传递给

renderComponent（）

函数时，它是否传递引用，或者将

this.createUserModal

的值复制到函数中的

组件

变量。如果它只是复制它，那么我就会理解为什么

destroy

不起作用。不，这就是JS的工作方式，非原语值作为引用传递。我认为您使用renderComponent具有的相同逻辑创建了

this.createUserModal

。不是吗？如果不是，那么

this.createUserModal

来自何处？

this.createUserModal

只是仪表板组件中的一个全局变量。传统上，这将是存储从

createComponent

返回的组件的地方，然后调用

this.createUserModal.destroy（）

来处理它。我看到的问题（这是有意义的）是，将

createComponent

保存到函数作用域变量基本上会在函数退出后使引用为null。因此，我想真正的问题是将组件引用保存到哪里，以便以后可以在策略上与它们交互。正如我看到的，如果将

createUserModal:ComponentRef

保存为

仪表板组件

属性，则不会有任何问题。它应该允许您稍后处理它，我是u