angluar动态生成html组件

export async function createComponentFactory(compiler: Compiler, template: string): Promise<ComponentFactory<any>> {  
// const cmpClass = class DynamicComponent {};  
@Component({  
selector: 'dynamic-selector',  
template: template,  
}) class DynamicComponent {  
@Input() settings;  
@Input() source;  
}  
// IMPORT ALL MODULES HERE!!!  
@NgModule({ imports: [  
CommonModule,  
RouterModule,  
ThemeModule,  
Ng2SmartTableModule,  
/* All other modules including components that can be use with renderer */  
],  
declarations: [DynamicComponent] })  
class DynamicHtmlModule {}  
  
const moduleWithComponentFactory = await compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule);  
return moduleWithComponentFactory.componentFactories.find(x => x.componentType === DynamicComponent);  
}  
  

<ng-template #ref></ng-template>  

  
@ViewChildren("ref", { read: ViewContainerRef}) public dynComponents: QueryList<ViewContainerRef>;  
  

protected createComponent(ref: ViewContainerRef, card: {[key:string]:any}) {  
createComponentFactory(this.compiler, card["body"]).then(factory => {  
const injector = Injector.create({ providers: [], parent: ref.injector });  
const cmpRef = ref.createComponent(factory, 0, injector, []);  
if (card["type"] == "table") {  
// @ts-ignore  
cmpRef.instance.settings = card["data"]["settings"];  
cmpRef.instance.source = new LocalDataSource(card["data"]["data"]);  
}  
this.cmpRef.push(cmpRef);  
});  
}