Angular can'；t在nativescript中动态编译自定义组件

我正在使用一个名为

P3X Angular Compile

的角度动态编译组件，它将字符串转换为我的nativescript项目中的已编译组件。 链接：。 我在我的{N}项目中通过

npm

安装了它，但它不起作用，所以我在项目中使用了

P3X

的一部分源代码，并创建了一个

动态组件生成器

，如下所示：

动态组件。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;
}
}

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

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

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

导出类DynamicComponentBuilder实现OnChanges{
@输入（'template'）html:string；
@输入（“模块”）模块：NgModule；
@输入（“父”）上下文：任何；
@输入（'error-handler'）errorHandler:Function=未定义；
@输入（'imports'）导入：数组；
dynamicComponent：任何；
动态模块：NgModuleFactory | any；
构造函数（专用编译器：编译器）{}
ngOnChanges（更改：SimpleChanges）{
这个.update（）；
}
更新（）{
试一试{
if（this.html===未定义| | this.html===空| | | this.html.trim（）===“”）{
this.dynamicComponent=未定义；
this.dynamicModule=未定义；
返回；
}
this.dynamicComponent=this.createNewComponent（this.html，this.context）；
this.dynamicModule=this.compiler.compileModuleSync（this.createComponentModule（this.dynamicComponent））；
}捕获（e）{
if（this.errorHandler==未定义）
投掷e；
其他的
这是错误处理程序（e）；
}
}
createComponentModule（组件类型：任意）{
let模块：NgModule={}；
if（this.module！==未定义）
模块=cloneDeep（this.module）；
module.imports=module.imports | |[]；
module.imports.push（CommonModule）；
if（this.imports！==未定义）
module.imports=module.imports.concat（this.imports）
if（module.declarations==未定义）
module.declarations=[componentType]；
其他的
module.declarations.push（componentType）；
module.entryComponents=[componentType]；
@NgModule（模块）
类RuntimeComponentModule{}
返回运行时组件模块；
}
CreateNewcomComponent（html:string，context:any）{
@组成部分({
选择器：nextId（），
模板：html
})
类DynamicComponent{
上下文：任意=上下文；
}
返回DynamicComponent；
}
}

动态组件。html:

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;
}
}

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

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

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

我使用的组件如下所示：

customPage.html:

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;
}
}

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

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

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

customPage.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;
}
}

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

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

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

textField=”“；
myListCmp=“”；
myListMd={entryComponents:[MyListComponent]}

组件正确地使用

textField

，但我的自定义

my list

组件不工作，并出现以下错误：

错误：无法同步编译，因为仍在加载MyListComponent


错误：未找到DynamicComponent的组件工厂。您是否已将其添加到@NgModule.entryComponents？



我需要提到的是，
我的列表
组件是在自定义模块中声明的

请帮忙！谢谢。
听起来像是
mylist
组件对p3x编译器插件不可见。它应该是
entryComponents
而不是
myListMd={entityComponents:[mylistconent]}
中的
entityComponents
？在您的customPage.ts中file@John非常感谢。我的问题中出现了打字错误。但是我写了正确的代码，仍然出错。您是否也将自定义模块添加到AppModule？您正在导出MyListComponent吗？是的。我将自定义模块导入AppModule。还导出了MyListComponent。