Angular2 动态插入脚本标签 [英] Angular2 dynamically insert script tag

问题描述

我从服务器内容进入 json 对象字段，它是 html、<style></style> 和 <script></script> 标签，我想像这样执行它:

I'm getting from server content into json object field, where it is html, <style></style> and <script></script> tags, and I want to execute it like this:

[innerHtml]="content | sanitize"，但是 <script></script> 标签不执行.有没有可能让它发挥作用?

[innerHtml]="content | sanitize", but <script></script> tags do not execute. Is it possible to make it work?

我的消毒管看起来像这样:

My sanitize pipe looks like this:

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 函数，但我该如何使用它?

I know, that there is bypassSecurityTrustScript function in DomSanitizationService, but how can I use it in my case?

推荐答案

这不是 angular 2 的问题，通过 innerHTML 插入的 script 标签不会被执行.

It's not an angular 2's problem, script tags inserted via innerHTML are not executed.

如果您有包含 script 标签的 html 字符串，请按以下方式插入:

If you have html string that contains script tags insert it this way:

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

这篇关于Angular2 动态插入脚本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！