如何使用angular在跨度中将html标签键入为文本

编程问答 2022-08-12

问题描述

从Api中获取值“证据”，例如“ <FORM METHOD="get" ACTION="search">” 

{
    data: {
        evidence:<FORM METHOD="get" ACTION="search">
    }
}

ts文件：

public evidence : any;
    
getEvidence(){
    this.service.getevidence().subscribe(data => {
        this.evidence= data.data.evidence                  // here we have the value
    });

html文件：

<span [innerHTML]="evidence"></span>

我想显示该值，但遇到类似问题

警告：清理HTML会剥离一些内容

解决方法

您可以绕过组件本身的消毒，

app.component.ts： 

import { DomSanitizer,SafeHtml } from '@angular/platform-browser';

public evidence : any;

constructor(private _sanitizer:DomSanitizer) {}

bypass(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
}

getEvidence(){
    this.service.getevidence().subscribe(data => {
        this.evidence= bypass(data.data.evidence);
    });
}

或者您可以编写管道以使其可重用

sanitizeHtml.pipe.ts： 

import { Pipe,PipeTransform } from "@angular/core";
import { DomSanitizer,SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

app.component.html： 

<span [innerHTML]="evidence | sanitizeHtml"></span>
angularangularangular7typescripttypescripttypescript