Angular2 динамически вставить скрипт тег

Question

Я получаю от содержания сервера в поле объекта JSON, где это HTML, <style></style> и <script></script> теги, и я хочу, чтобы выполнить это следующим образом:

[innerHtml] = "содержание | sanitize ", но <script></script> теги не выполняются. Можно ли заставить его работать?

Моя Sanitize труба выглядит следующим образом:

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); 
    } 
} 

Я знаю, что есть bypassSecurityTrustScript функция DomSanitizationService, но как я могу использовать это в моем случае?

Answer 1

Это не проблема с угловым 2, script теги, вставленные через innerHTML, не выполняются.

Если у вас есть HTML строка, содержащие теги script вставить его таким образом:

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; 
    } 
}