angular2.0+ Dynamically binding HTML text

ANGULAR2 Project site needs a container page that can show the user custom developed HTML text (including css,js,html, etc.)

For example, after editing Css,js and HTML, you can see the display in real time on the right, and you can perform button events.

Ideas:

A generic component container is defined to accept the JS,CSS parameter, the component template object loads the Html,styles object to load the CSS, and the JS script is injected through the renderer class.

Realize:

1. Creating a tree Component 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; ngmod Ulefactory:dynamicmodule; " > </ng-container> ', Styleurls: ['./dynamic-com.component.css ']}) export class Dynamiccomcomponent implements 　　OnInit {dynamiccomponent:any; 　　dynamicmodule:ngmodulefactory<any>;　　@Input (' HTML ') html:string; Receive HTML
@Input (' JS ') js:string;
@Input (' CSS ') css:string;
@Input (' DataSource ') datasource:any; Data sources that need to be bound in HTML
Constructor (private Compiler:compiler) {}
Change after recompile to generate 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> ', s Tyles: [Comcss]}) class Mydynamiccomponent {public list:any = DataSource;
Constructor (private _renderer2:renderer2, @Inject (DOCUMENT) Private _document, private elementref:elementref ) {}//Inject 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. Introduction of components

Form-design.component.html

Components can be introduced via <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; " > </div>
<div id= "Result" style= "float:left; height:435px;width:49%; " >

3. Form-design.component.ts Component Class definition parameters

Import {Component, OnInit} from ' @angular/core ';
@Component ({selector: ' app-form-design ', Templateurl: './form-design.component.html ', styleurls: ['./form-design.co Mponent.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: <button onclick= "Test ()" > View </button><br/> <div id= "Div1" &  　　gt; text </div></div> '; Constructor (private Listservice:listservice) {}
Ngoninit () {}}

angular2.0+ Dynamically binding HTML text