Angular2.0+动态绑定html文本
背景：
Angular2项目网站需要一个容器页面，可以展示用户自定义开发的html文本（包含css,js,html等）
如下图，编辑好css,js及html后，在右侧可以实时查看展示效果，并且可以执行按钮事件。
思路：
定义一个通用组件容器接受js,css参数，组件中template对象加载html，styles对象加载css，并通过Renderer类注入js脚本。
实现：
1.创建树组件 dynamic-com.component.ts
import { SharedModule } from '../../../module/shared-module/shared-module'; import { Renderer2, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser';@Component({ selector: 'app-dynamic-com', template: `
@Input('js') js: string;
@Input('css') css: string;
@Input('dataSource') dataSource: any; //html中需要绑定的数据源
constructor(private compiler: Compiler) { }
//改变后重新编译生成html ngOnChanges(changes: SimpleChanges) { if (changes['html'] && !changes['html'].isFirstChange() || changes['css'] && !changes['css'].isFirstChange() || changes['js'] && !changes['js'].isFirstChange() || (changes['dataSource'] && !changes['dataSource'].isFirstChange())) { this.dynamicComponent = this.createNewComponent(this.html, this.dataSource); this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent)); } }
ngOnInit() { this.dynamicComponent = this.createNewComponent(this.html, this.dataSource); this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent)); }
protected createComponentModule(componentType: any) { @NgModule({ imports: [SharedModule], declarations: [ componentType ], entryComponents: [componentType] }) class RuntimeComponentModule { }
// a module for just this Type return RuntimeComponentModule; }
protected createNewComponent(template: string, dataSource: any) { console.log(this.js + template); let comJs = this.js; let comCss = this.css;
@Component({ selector: 'dynamic-component', template: template ? template : '', styles: [comCss] }) class MyDynamicComponent { public list: any = dataSource;
constructor(private _renderer2: Renderer2, @Inject(DOCUMENT) private _document, private elementRef: ElementRef) { } //注入js
ngAfterViewInit() { if (comJs) { var s = document.createElement("script"); s.type = "text/javascript"; //s.src = "http://"; //s.text = `function test(){alert(111);}`; s.text = comJs; this.elementRef.nativeElement.appendChild(s); } } }
return MyDynamicComponent; } }
2.引入组件
form-design.component.html
可以通过
编辑您的代码：
css:
js:
html:
查看结果:
3. form-design.component.ts组件类定义参数
@Component({ selector: 'app-form-design', templateUrl: './form-design.component.html', styleUrls: ['./form-design.component.css'] }) export class FormDesignComponent implements OnInit {
dataSource: Array
按钮：
`;
constructor(private listService: ListService) {
}
文字
ngOnInit() {} }