javascript - Angular 6 使用管道将字符串转换为 Html

Question

我的输入字符串是

  html:string="<a role="button" class=" fas fa-trash-alt fa-1x" title="Remove Link" href="#"></a>"

我希望将其转换为原始 html

管道:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({
  name: 'htmldecoder'
})
export class HtmldecoderPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }

}

HTML 代码:

<div>
    <div [innerHtml]="html | htmldecoder">
    </div>
</div>

进入UI的输出是

<a role="button" class="fas fa-trash-alt fa-1x" title="Remove Link" href="#"></a>

预期的输出应该是按钮

Answer 1

在您的代码中进行以下更改，它会起作用，代码非常简单，易于 self 解释

应用程序组件.ts

  html = `html:string="<a role="button" class=" fas fa-trash-alt fa-1x" title="Remove Link" href="#">aditya</a>"`;

管道

  transform(value) {
    value = value.substring(13, value.length-1);
     var doc = new DOMParser().parseFromString(value, "text/html");
     const value123 = doc.documentElement.textContent;
    return this.sanitized.bypassSecurityTrustHtml(value123);
  }

app.component.html

<div [innerHTML]="html | htmldecoder">