Angular在生产环境下动态创建组件无法工作

Question

Angular在生产环境下动态创建组件无法工作

angularangular5angular-gridster2

6

我在使用'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",

感谢大家。

- oktykrk

嗨，你修好了吗？能帮我吗？我也遇到了同样的问题。我在这里提出了一个问题。 - AAHN

很遗憾无法修复。目前我只是使用“ng build”构建了我的应用程序，没有使用“--prod”标志。 - oktykrk

1

我解决了 :) 感谢您在我的问题这里检查答案。 - AAHN

非常感谢，解决了我的问题:)我已经将此解决方案打包为npm软件包以便重用。在此处查找软件包：https://www.npmjs.com/package/ngx-dynamic-host。 - oktykrk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user9576114 · Answer 1

这是对我有用的，

创建一个指令以如下方式查看，

在您的app-component-loader.ts onInIt中

@ViewChild(DynamicHostDirective) 
   hostDirective: DynamicHostDirective

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

        const instance  = this.hostDirective.viewContainerRef.createComponent(this._componentFactory).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]();
                });
            });
        }
    }
    }

在你的 app-component-loader.html 文件中，

<ng-template dynamic-host></ng-template>

最后的主机指令

import {Directive, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[dynamic-host]',
})
export class DynamicHostDirective {
constructor(public viewContainerRef: ViewContainerRef){}
}

希望能有所帮助