ava alt for render RR 註入js input javascrip tty

Angular2項目網站需要一個容器頁面，可以展示用戶自定義開發的html文本（包含css,js,html等）

如下圖，編輯好css,js及html後，在右側可以實時查看展示效果，並且可以執行按鈕事件。

思路：

定義一個通用組件容器接受js,css參數，組件中template對象加載html，styles對象加載css，並通過Renderer類註入js腳本。

實現：

1.創建樹組件 dynamic-com.component.ts

import { Component, OnInit, Input, NgModule, ElementRef } from ‘@angular/core‘; 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: ` 　　　　<ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: dynamicModule;"> 　　　　</ng-container>`, 　　styleUrls: [‘./dynamic-com.component.css‘] }) export class DynamicComComponent implements OnInit { 　　dynamicComponent: any; 　　dynamicModule: NgModuleFactory<any>; 　　@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 : ‘<div></div>‘, 　　　　　　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

可以通過<app-dynamic-com [js]="js" [css]="css" [html]="html" [dataSource]="list"></app-dynamic-com>來引入組件

<div style="margin: 0 auto;text-align: left;border: 1px solid #c5c5c5;"> <div id="CodeArea" style="float: left; height: 435px; width: 50%;margin-left: 5px;border-right: 1px solid #cfcfe6;"> 　　<h2>編輯您的代碼：</h2> 　　<div style="width:45%;float:left;"> 　　<h4>css:</h4> 　　<textarea [(ngModel)]="css"></textarea> </div> <div style="width:45%;float:left;"> 　　<h4>js:</h4> 　　<textarea [(ngModel)]="js"></textarea> </div> <div style="width:100%;float:left;"> 　　<h4>html:</h4> 　　<textarea [(ngModel)]="html"></textarea> </div>
</div>
<div id="result" style="float: left; height: 435px;width: 49%;"> 　　<h2>查看結果:</h2> <br /> 　　<app-dynamic-com [js]="js" [css]="css" [html]="html" [dataSource]="list"></app-dynamic-com> </div> </div>

3. form-design.component.ts組件類定義參數

import { Component, OnInit } from ‘@angular/core‘;
@Component({ 　　selector: ‘app-form-design‘, 　　templateUrl: ‘./form-design.component.html‘, 　　styleUrls: [‘./form-design.component.css‘] }) export class FormDesignComponent implements OnInit {
　　dataSource: Array<any> = []; 　　css=`.myDiv{ font-size:20px} 　　　　　　#div1{color:red}`; 　　js=` function test(){ 　　　　　　alert(111) 　　　　　}`; 　　html = `<div class="myDiv">按鈕：<button onclick="test()">查看</button><br/> 　　　　　　　　<div id="div1">文字</div></div>`; 　　constructor(private listService: ListService) { 　　}
　　ngOnInit() {} }

Angular2.0+動態綁定html文本