Question

我正在尝试显示均存储在字符串中的html和执行脚本。

我创建了一个管道，该管道使用this.sanitizer.bypassSecurityTrustHtml（）方法转换字符串。

然后，将字符串的内容注入innerHtml属性中，并将其与管道结合在一起。

您可以在stackblitz上执行它：https://stackblitz.com/edit/angular-uilj36

这是我的代码的一部分：

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public html = '<div>Html content</div> <script>console.log("run js ok");</script>';
}

app.component.html

<h1>Code injection :</h1>
<div [innerHtml]="html | safe"></div>

问题是脚本无法执行。

有人知道为什么不执行脚本吗？

PS：我知道不推荐这样做，但有人要求我这样做：）

Angular-如何使用InnerHtml

0 个答案: