Question

我遇到动态组件渲染问题，使用＆＃39; ViewContainerRef ＆＃39;在gridster项目中。

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

ex：<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>
            </gridster-item>
 </gridster>

在开发的同时，它正常工作并加载gridster项目及其插座组件。

Hovewer今天我尝试用ng build --prod构建我的应用程序并部署到服务器我发现我的组件加载器没有创建组件。

我是否遗漏了为生产构建创建动态组件的特殊内容。我已经搜索了这个，但一无所获。

在实现我的组件加载器组件之前，我正在使用 ng-dynamic-component 包创建此组件，并且再次在开发时工作正常，但是出现异常，说明了实例当生产时，组件为NULL。

我认为创建渲染组件但需要帮助的方式不是问题。

此外，我的依赖项是：

"@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",

谢谢大家。

Answer 1

这对我有用，为视图创建一个指令，如下所示，在你的app-component-loader.ts onInIt

中

＆＃13;

@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]();
                });
            });
        }
    }
    }

＆＃13;

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

＆＃13;

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

＆＃13;

终于主持指令

＆＃13;

import {Directive, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[dynamic-host]',
})
export class DynamicHostDirective {
constructor(public viewContainerRef: ViewContainerRef){}
}

＆＃13;

希望有所帮助

角度动态组件创建在PRODUCTION时不起作用

1 个答案: