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）附加到我的页面上，因此我正在努力解决该问题。

使用JavaScript在Angular2中使用bypassSecurityTrustHtml和bypassSecurityTrustScript

1 个答案: