小编okt*_*krk的帖子

我在使用 gridster 项目中的“ ViewContainerRef ”进行动态组件渲染时遇到问题。

我已经实现了一个组件，它将组件引用、输入和输出作为输入并在其内部创建这个给定的组件。

前任： <app-component-loader [compRef]="{ref: ExComponent}"><app-component-loader>

内部组件加载器 onInit 回调我有

if (this.compRef && this.compRef.ref) {
        this._componentFactory = this._componentFactoryResolver.resolveComponentFactory(this.compRef.ref);

        const instance  = this.viewContainer.createComponent(this._componentFactory, 0).instance;

        console.log(instance);

        if (this.compInputs) {
            Object.getOwnPropertyNames(this.compInputs).forEach(field => {
                instance[field] = this.compInputs[field];
            });
        }

        if (this.compOutputs) {
            Object.getOwnPropertyNames(this.compOutputs).forEach(field => {
                instance[field].subscribe(e => {
                    this.compOutputs[field]();
                });
            });
        }
    }

我将此组件 laoder 用于 gridster 项目组件，例如：

<gridster [options]="gridsterConfig">
            <gridster-item [item]="widget" *ngFor="let widget of board.widgets">
                <app-component-loader [compRef]="{ ref: registry.get(widget.outletComponent) }" [compInputs]="{ widget: widget }" [compOutputs]="{ removeCallback: widgetRemoveCallback.bind(this), changed: widgetChanged.bind(this) }"></app-component-loader> …