Question

我有api端点，它返回自定义html和脚本字符串。我需要告诉angular2它是一个安全的HTML并将其呈现为组件模板。到目前为止我的代码：

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和脚本标记呈现为模板，但不执行脚本。

Answer 1

angular2将编译并将模板呈现为父html。但它会运行任何脚本。因此，您无法在服务器的html中添加任何<script>。

也许您可以尝试使用ngAfterViewInit组件。例如，在ngAfterViewInit()函数中，加载脚本并使用js函数eval()进行评估。

在angular2组件中注入自定义脚本

1 个答案: