Angular 从 innerHTML 中去除数据属性

Question

我有一个从 API 端点返回的字符串，如下所示：

If you died tomorrow, your wife <span class='person' data-relationship='Relationship.Wife' data-avatarid='1212'>Alice</span> will lose everything.

因此，为了将其显示为 HTML，我使用了 interHTML 属性：

<p *ngFor="let con1Died of consequences?.client1Died" [innerHTML]="con1Died"></p>

但这是输出到浏览器的数据属性被剥离为：

<p _ngcontent-smy-c63="">If you died tomorrow, your wife <span class="person">Alice</span> will lose everything.</p>

如何使用数据属性输出它？有办法吗？

编辑：所以我从下面尝试了 HTML 卫生技术，但仍然没有应用 CSS：

this.reportsService.getConsequences().subscribe(res => {
      // Load the consequences to angular
      this.consequences = res;
      this.client1Died = new Array();
      this.consequences.client1Died.forEach(element => {
        const safehtml = this.sanitized.bypassSecurityTrustHtml(element);
        this.client1Died.push(safehtml);
      });
      console.log(this.client1Died);
    });

Answer 1

创建一个管道来清理 Html：

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

@Component({
    selector: 'my-app',
    template: `<div [innerHTML]="content | safeHtml"></div>`,
})