Question

我一直在使用组件工厂解析器一段时间，虽然我认为它很漂亮，但有一件事让我疯狂。我希望将大部分重复的代码包装成一个渲染组件的辅助函数。

在我的情况下，我有一个仪表板组件，我们通过改变单件服务来触发可见性，从而呈现相当多的不同组件。我想知道是否有人成功创建了一个类似助手的函数，可以传递一些变量来实现相同的效果，从而消除了大量的重复代码。

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

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属性this.createUserModal的值，这反过来又允许在其上调用所有方法照常。

Angular 2组件工厂旋转变压器辅助功能

1 个答案: