angluar动态生成html组件
在使用angular框架时，我们有时候需要根据动态的html模板内容渲染组件。如果你是直接DomSanitizer类生成安全的html再绑定到[innerHTML]属性，当你的html包含一些angluar组件时，它是不会进行渲染的这时候我们就需要根据html内容动态创建组件渲染。
通过这种方式你就可以处理服务端返回的html或者自定义生成的html进行动态渲染。使用这种有一个弊端就是在你发布上线时(也就是build)不用使用aot方式进行构建。你必须使用以下命令去构建。
ng build --prod --aot=false --build-optimizer=false
创建组件
和正常创建组件没有什么区别，我们还是要定义Component和Module。只是把这段代码封底装成一个函数。你也可以在组件里面定义@input，Module里面导入其它的模块。
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);
}
这段代码就是定义一个组件模块，使用解释器编译这个模块。所以必须提供解释器类。
定义ViewContainerRef
我们需要定义一个ViewContainerRef来容器来填充组件。
<ng-template #ref></ng-template>
@ViewChildren("ref", { read: ViewContainerRef}) public dynComponents: QueryList<ViewContainerRef>;
调用渲染
在调用的组件中你需要注入Compiler。
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);
});
}
