Inject пользовательский скрипт в компоненте angular2

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. Но он будет запускать любой скрипт. Таким образом, вы не можете добавить <script> в свой html с сервера.

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

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.