自定义管道未将字符串转换为 Dom 元素答案

【问题标题】：Custom pipe not converting string into Dom Element自定义管道未将字符串转换为 Dom 元素
【发布时间】：2020-03-23 00:52:49
【问题描述】：

我在 Angular 6 中创建了一个自定义管道来将字符串转换为 HTMLDom 元素（标签），我可以在我的 ts 文件中获得响应，但在 html 中它显示为[object Element]

{{link.portfolioCompanyLinkName.svGicons | quillConvertToDom }}

我的自定义管道 Ts 文件

export class QuillConvertToDomPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    var xmlString = value;
    var doc = new DOMParser().parseFromString(xmlString, "text/xml"); 
    console.info(doc.firstChild);
    return doc.firstChild;
  }

}

当我控制台时，我收到了价值

【问题讨论】：

@AdritaSharma stackblitz.com/edit/angular-pmempw

标签： html angular dom angular6 angular-pipe

【解决方案1】：

您可以使用innerHtml 代替管道。

试试这个：

<div [innerHtml]="tag"></div>

Working Demo

【讨论】：

【解决方案2】：

试试这个

替换 var doc = new DOMParser().parseFromString(xmlString, "text/xml");

下面一行 var doc = new DOMParser().parseFromString(xmlString, "text/html");

【讨论】：