在Angular模板绑定中剥离html

Question

我有一个列表,显示有时可能包含HTML的数据

  <li *ngFor="let result of results">
    <span [innerHTML]="result.question.title">
    </span>
  </li>

使用的问题innerHTML是HTML被解析和渲染,所以像<p>标签这样的东西会增加边距并破坏列表的对齐.

我想剥离所有的html标签,只输出纯文本.

像这样的方法:

  <li *ngFor="let result of results">
    <span>
        {{result.question.title}}
    </span>
  </li>

不剥离HTML,它只是将HTML作为纯文本输出.

如何剥离HTML并将纯文本保留为"Angular"方式？

Answer 1

我想没有直接从字符串中删除HTML标签的方法,你可以使用Pipe,写一个像这样的"管道":

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'striphtml'
})

export class StripHtmlPipe implements PipeTransform {
    transform(value: string): any {
        return value.replace(/<.*?>/g, ''); // replace tags
    }
}

然后将"StripHtmlPipe"添加到模块"声明"中,在这些步骤之后,您可以在HTML中使用此管道:

<li *ngFor="let result of results">
    <span>
        {{result.question.title | striphtml}}
    </span>
  </li>

请注意,上面的代码未经过全面测试.

Answer 2

我不建议按照 kite.js.org 的建议使用正则表达式来解析 html。改用浏览器textContent/innerText函数：

htmlToText(html: string) {
    const tmp = document.createElement('DIV');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
}

这应该更可靠。如果您愿意，您仍然可以使用管道，只是不要使用正则表达式来解析 html！