Angular2动态插入脚本标记

And*_*lov 6 html javascript angular2-services angular

我从服务器内容到json对象字段,它是html <style></style><script></script>标签,我想这样执行它:

[innerHtml] ="content | sanitize",但<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);
    }
}
Run Code Online (Sandbox Code Playgroud)

我知道,DomSanitizationService中有bypassSecurityTrustScript函数,但我怎么能在我的情况下使用它呢?

小智 20

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

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

const fragment = document.createRange().createContextualFragment(yourHtmlString);
anyElement.appendChild(fragment);
Run Code Online (Sandbox Code Playgroud)