не может скомпилировать пользовательский компонент динамически в nativescript angular - PullRequest
Новая
       13

не может скомпилировать пользовательский компонент динамически в nativescript angular

3 голосов
/ 11 июня 2019

Я использую компонент Angular Dynamic Compile под названием P3X Angular Compile, который превращает строку в скомпилированный компонент в моем проекте nativescript. ссылка: https://npm.taobao.org/package/p3x-angular-compile. Я устанавливаю это через npm в моем проекте {N}, но это не сработало, поэтому я использую часть исходного кода P3X в своем проекте и создаю dynamic-component-builder следующим образом:

динамические-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;
}
}

динамически 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 объявлен в пользовательском модуле.

Пожалуйста, помогите! спасибо.

...