Блог

У меня есть конечная точка 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 и тег script отображаются в шаблоне, но скрипт не выполняется.

angular2 скомпилирует и отобразит шаблон в родительском HTML. Но он будет запускать любой скрипт. Таким образом, вы не можете добавить что-либо <script> в свой html с сервера.

Может быть, вы можете попробовать с ngAfterViewInit компонента. Например, в ngAfterViewInit() функции загрузите свой скрипт и выполните оценку с помощью функции js eval() .