在 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，写一个 "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" 添加到您的模块 "declarations"，完成这些步骤后，您可以在 HTML:

中使用此管道

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

请注意上面的代码没有经过全面测试。

Answer 2

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

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

这个应该靠谱多了。如果你愿意，你仍然可以使用管道，只是不要使用正则表达式来解析 html!

在 Angular 模板绑定中删除 html

Strip html in Angular template binding

html

angular2-template

angular