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