angular html 立即执行_Angular2.0+动态绑定html文本

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: `

`,

styleUrls: ['./dynamic-com.component.css']

})

export class DynamicComComponent implements OnInit {

dynamicComponent: any;

dynamicModule: NgModuleFactory;

@Input('html') html: string;　　//接收html

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

}

}