angular - 如何从 Angular 中的 typescript 文件返回 htmlsafe 字符串？

Question

我正在尝试从组件返回 htmlsafe 字符串。是否可以？如果是的话，有人帮我吗？

这是我的尝试:

ts 文件:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  inputs = [{'name':'name1'},{'name':'name2'},{'name':'name3'}];

  getWrapped(input) {
    return `<div>${input.name}</div>`; //but not works!!
  }
}

模板:

<ul>
  <li *ngFor="let input of inputs">{{getWrapped(input)}}</li>
</ul>

我可以在模板中做到这一点。但仍在从 ts 文件中寻找解决方案。

提前致谢。

Answer 1

您可以为此使用 Angular Pipe，如下所示。

TS

@Pipe({ name: 'safeHtml' })

@Injectable()
export class SafeHtmlPipe implements PipeTransform {

    constructor(private sanitized: DomSanitizer) { }

    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

HTML

<ul>
  <li *ngFor="let input of inputs" [innerHTML]="getWrapped(input) | safeHtml"></li>
</ul>

找工作 StackBlitz Demo .