2017-07-18 9 views
0

はのは、私は、このような角度活字体innerHTMLの入力コンポーネントに結合

["<div class=list-group-item><span><label>Enter text</label> : <input type =text placeholder=value [(ngModel)]=text0 index=gen > </span> </div>", 
"<div class=list-group-item><span><label>Enter text</label> : <input type =text placeholder=value [(ngModel)]=text1 index=gen > </span> </div>"] 

ようにMongoDBからHTMLコードの[文字列]を取得し、私はそれをサニタイズし、完全な機能を持つフォームにそれをしたい処理しましょう!

私のhtmlコード:

<p> 
    DATA: 
{{this.id}} 
</p> 
<span *ngFor="let item of this.code;let x= index;"><div [innerHTML]="sanitizer.bypassSecurityTrustHtml(this.code[x])" ></div> 
    {{this.item}}<br> 
    WORK GOdDAMMIT!!: {{text0}} 

</span> 

私はハード、それが動作することを決定したかどうかを確認するためにtext0をコード化!

今、私はそれを行うことができるようにngModelの値にアクセスする方法の基本的な例を教えてください。 AngularJS(バージョン1.6)では

私はどんな小さな例またはそのようなものが非常に有益であろうバインドHTMLコンパイル

と呼ばれる外部モジュールでそれを行うために管理!ここ

あなたは私のcomponent.tsを見てしたい場合は、:

@Component({ 
    selector: 'app-form-show', 
    templateUrl: './form-show.component.html', 
    styleUrls: ['./form-show.component.css'], 
    providers: [FormShowService] 
}) 
export class FormShowComponent implements OnInit { 
    private id:string; 
    private code:string; 
    //private htmlCode :HTML 
    constructor(
    private http: Http, 
    private router: Router, 
    private route : ActivatedRoute, 
    private sanitizer: DomSanitizer 
) { 

    } 

    ngOnInit(){ 
     //console.log(this.Code) 
     console.log(this.route.params['value'].id); 
     this.id=this.route.params['value'].id 
     this.getID(); 
    } 

getID(){ 
    let jsonData : JSON; 
    jsonData=JSON.parse('{"data" :"'+ this.id +'"}'); 

    return this.http.post('/api/getInfo', jsonData).subscribe(
    res => {res.json(); 
     console.log(res.json()); 
     let resProc = res.json(); 
     console.log(resProc); 
     this.code=resProc[0].script; 
     console.log(this.code); 
     }); 

} 



} 

ありがとう!

答えて

0

私は、あなたと同様の状況に遭遇するかもしれないあなたの誰かのためにはるかに単純なソリューションを持っています。私はViewcontainerreffを試しましたが、役に立たない... npm.jsで検索した後、 !

The Fantabulous ng-dynamic

、それは使い方だも非常に単純です:

<div *dynamicComponent="your_html_string">loadin</div> 

それはangular4ディレクティブで動作し、あなたがそのような目的のために必要なすべてのです!

グッドラック

〜ロニー・マクナマラ

関連する問題