Angular2動的に挿入するスクリプトタグ

Question

私はそれは、HTML、<style></style>と<script></script>タグであるJSONオブジェクトフィールドへのサーバのコンテンツから取得しています、と私はこのようにそれを実行したい：

[innerHTMLプロパティ] = "コンテンツ|サニタイズ "しますが、<script></script>タグは実行されません。それを動作させることは可能ですか？

私のサニタイズパイプは次のようになります。

import {Pipe} from '@angular/core'; 
import {DomSanitizationService} from '@angular/platform-browser'; 

@Pipe({ 
    name: 'sanitize', 
    pure: true 
}) 
export class Sanitize { 
    constructor(private sanitizer: DomSanitizationService) { 

    } 

    transform(html: string) { 

     return this.sanitizer.bypassSecurityTrustHtml(html); 
    } 
} 

私はDomSanitizationServiceでbypassSecurityTrustScript機能があることを、知っているが、どのように私は私の場合にはそれを使用することができますか？

Answer 1

角度2の問題ではありません。script innerHTMLで挿入されたタグは実行されません。

あなたがscriptのタグを含むHTML文字列を持っている場合は、このようにそれを挿入します。

const fragment = document.createRange().createContextualFragment(yourHtmlString); 
anyElement.appendChild(fragment); 

Answer 2

...あなたはこのようにそれを行うために必要な一切の角度方法はありません....

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

@Pipe({ 
    name: 'sanitize', 
    pure: true 
}) 
export class Sanitize { 

    constructor(private domSanitizer: DomSanitizer) { } 


    handleExternalScriptsInHtmlString(string) { 
    let that = this; 
    var parser = new DOMParser(); 
    var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script'); 
    var results = []; 

    for (var i = 0; i < scripts.length; i++) { 
     var src = scripts[i].getAttribute('src'); 
     if (src.length && results.indexOf(src) === -1) { 
     results.push(src); 
     that.addScript(src); 
     } 
    } 

    return results; 
    } 

    addScript(src) { 
    var script = document.createElement('script'); 
    script.setAttribute('src', src); 
    document.body.appendChild(script); 
    } 


    transform(htmlContent: any) { 
    let sanitizeHtmlContent = this.domSanitizer.bypassSecurityTrustHtml(htmlContent); 

    this.handleExternalScriptsInHtmlString(htmlContent); 

    return sanitizeHtmlContent; 
    } 
} 

Answer 3

これは問題を解決します...

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

@Pipe({ 
    name: 'sanitize', 
    pure: true 
}) 
export class Sanitize { 

    constructor(private domSanitizer: DomSanitizer) { } 


    handleExternalScriptsInHtmlString(string) { 
    let that = this; 
    var parser = new DOMParser(); 
    var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script'); 
    var results = []; 

    for (var i = 0; i < scripts.length; i++) { 
     var src = scripts[i].getAttribute('src'); 
     if (src.length && results.indexOf(src) === -1) { 
     results.push(src); 
     that.addScript(src); 
     } 
    } 

    return results; 
    } 

    addScript(src) { 
    var script = document.createElement('script'); 
    script.setAttribute('src', src); 
    document.body.appendChild(script); 
    } 


    transform(htmlContent: any) { 
    let sanitizeHtmlContent = this.domSanitizer.bypassSecurityTrustHtml(htmlContent); 

    this.handleExternalScriptsInHtmlString(htmlContent); 

    return sanitizeHtmlContent; 
    } 
}