我在使用'ViewContainerRef'在Gridster项目中渲染动态组件时遇到了问题。
我已经实现了一个组件,该组件将组件引用、输入和输出作为输入,并在其内部创建给定的组件。
例如:<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]();
});
});
}
}
我将使用这个组件加载器在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>
</gridster-item>
</gridster>
开发时它可以正常工作并加载网格项和它们的输出组件。
然而,今天我尝试使用 ng build --prod
构建我的应用程序并将其部署到服务器上。 我发现我的组件加载器没有创建组件。
我是否忽略了某些特殊的东西来动态创建组件以进行生产构建?我已经搜索过这个问题,但是没有找到任何答案。
在实现组件加载器之前,我正在使用< strong>ng-dynamic-component软件包进行此组件创建,并且在开发期间仍然可以正常工作,但是在生产期间会出现指示组件实例为空的异常。
我认为问题不在于创建或呈现组件的方式,而是需要帮助解决问题。
此外,我的依赖关系如下:
"@angular/animations": "^5.2.9",
"@angular/cdk": "^6.0.2",
"@angular/common": "^5.2.9",
"@angular/compiler": "^5.2.9",
"@angular/core": "^5.2.9",
"@angular/flex-layout": "^5.0.0-beta.14",
"@angular/forms": "^5.2.9",
"@angular/http": "^5.2.9",
"@angular/platform-browser": "^5.2.9",
"@angular/platform-browser-dynamic": "^5.2.9"
"@angular/cli": "^1.7.3",
"@angular/compiler-cli": "^5.2.9",
"@angular/language-service": "^5.2.9",
感谢大家。