Question

我正在使用一个名为P3X Angular Compile的Angular Dynamic Compile组件，该组件将字符串转换为我的nativescript项目中的已编译组件。链接：https://npm.taobao.org/package/p3x-angular-compile。我通过npm将其安装在我的{N}项目中，但是没有用，所以我在项目中使用了P3X的部分源代码，并创建了一个dynamic-component-builder，如下所示：

dynamic-component.ts：

export class DynamicComponentBuilder implements OnChanges {

@Input('template') html: string;
@Input('module') module: NgModule;
@Input('parent') context: any;
@Input('error-handler') errorHandler: Function = undefined;
@Input('imports') imports: Array<Type<any> | ModuleWithProviders | any[]>;

dynamicComponent: any;
dynamicModule: NgModuleFactory<any> | any;

constructor(private compiler: Compiler) { }

ngOnChanges(changes: SimpleChanges) {
    this.update();
}

update() {
    try {
        if (this.html === undefined || this.html === null || this.html.trim() === '') {
            this.dynamicComponent = undefined;
            this.dynamicModule = undefined;
            return;
        }
        this.dynamicComponent = this.createNewComponent(this.html, this.context);
        this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));

    } catch (e) {
        if (this.errorHandler === undefined)
            throw e;
        else
            this.errorHandler(e);
    }
}

createComponentModule(componentType: any) {
    let module: NgModule = {};
    if (this.module !== undefined)
        module = cloneDeep(this.module);

    module.imports = module.imports || [];
    module.imports.push(CommonModule);
    if (this.imports !== undefined)
        module.imports = module.imports.concat(this.imports)

    if (module.declarations === undefined)
        module.declarations = [componentType];
    else
        module.declarations.push(componentType);

    module.entryComponents = [componentType];

    @NgModule(module)
    class RuntimeComponentModule { }
    return RuntimeComponentModule;
}


createNewComponent(html: string, context: any) {
    @Component({
        selector: nextId(),
        template: html
    })
    class DynamicComponent {
        context: any = context;
    }
    return DynamicComponent;
}
}

dynamic-component.html：

<ng-container *ngIf="html !== undefined && html !== null && html.trim() !=='' ">
  <ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: 
 dynamicModule;"> </ng-container>
</ng-container>

我像这样使用这个组件：

customPage.html：

<StackLayout dynamic [template]="myListCmp" [module]="myListMd" [parent]="this"></StackLayout>
<StackLayout dynamic [template]="textField" [parent]="this"></StackLayout>

customPage.ts：

textField= "<TextField hint='Enter date'></TextField>";
myListCmp= "<my-list></my-list>";
myListMd= { entryComponents: [ MyListComponent ] }

该组件可与textField正常工作，但我的自定义my-list组件无法正常工作，并出现以下错误：

ERROR Error: Can't compile synchronously as MyListComponent is still being loaded!
ERROR Error: No component factory found for DynamicComponent. Did you add it to @NgModule.entryComponents?

我需要提到my-list组件是在自定义模块中声明的。

请帮助！谢谢。

无法以原生脚本angular

0 个答案: