使用JavaScript在Angular2中使用bypassSecurityTrustHtml和bypassSecurityTrustScript

Question

我试图通过组件在我的Angular2文件中执行javascript函数。 但我不能让这个工作。

这就是我的ts文件的样子。

import { Component, OnInit, Input } from '@angular/core';
import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

import { JavaScriptService } from './javascript.service';

@Component({
  selector: 'app-javascript',
  template: `
     <div [innerHtml]="html"></div>
  `
})
export class JavaScriptService{

  html: any;

  constructor(private sanitizer: DomSanitizer) {

  this.html = sanitizer.bypassSecurityTrustHtml(`<div><script type="text/javascript"> alert('h');</script></div>`);

  }

}

这是Angular在浏览器中呈现页面时的外观（我检查过elemens）

<div ng-reflect-inner-h-t-m-l="<div><script type=&quot;text/javascript&quot;> alert('h');</script></div>">
<div><script type="text/javascript"> alert('h');</script></div>
</div>

我不明白为什么加载页面后警报没有执行。

我已经尝试过bypassSecurityTrustHtml和bypassSecurityTrustScript，但没有运气。 我很感激，如果有人有解决方案。

谢谢！

Answer 1

我之前在.ts文件中看到过这个。

它将执行您的脚本标记。

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

即使它有效，但我得到这个问题，SafeValue必须使用[property] = binding :(请参阅http://g.co/ng/security#xss ）附加到我的页面，所以我正在努力解决这个问题。