2016-10-19 6 views
2

カスタムhtmlとスクリプト文字列を返すapiエンドポイントがあります。私はangular2にそれを安全なhtmlとコンポーネントテンプレートにレンダリングする必要があります。これまでの私のコード:私は私のテンプレートでangle2コンポーネントにカスタムスクリプトを挿入します。

import { Component } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.template.html', 
}) 
export class AppComponent { 

    public htmlToRender: any; 

    constructor(
     private _sanitizer: DomSanitizer, 
    ) {} 

    public ngOnInit(): void { 

     const html = ` 
      <p>Hello</p> 
      <p id="a"></p> 
      <script> 
       document.getElementById("a").innerHTML = "World" 
       console.log(111); 
      </script> 
     `; 

     this.htmlToRender = this._sanitizer.bypassSecurityTrustHtml(html); 
    } 

} 

'<div [innerHTML]="htmlToRender"></div>' 

しかし、これは動作しません。 HTMLタグとスクリプトタグはテンプレートにレンダリングされますが、スクリプトは実行されません。

答えて

0

angular2は、テンプレートを親htmlにコンパイルしてレンダリングします。しかし、それは任意のスクリプトを実行します。したがって、サーバからあなたのhtmlに<script>を追加することはできません。

多分ngAfterViewInitのコンポーネントで試すことができます。たとえば、ngAfterViewInit()関数では、スクリプトをロードし、js関数eval()で評価します。

+0

関連する問題