在 Angular 中将 HTML 字符串显示为纯文本

Question

我正在使用 Angular 开发博客。我想以纯文本形式显示从数据库中检索到的 HTML 字符串（用于列出每个博客 post 的预览）。 HTML 富文本是使用 ngx-quill.

生成的

我可以使用代码 <quill-view [content]="post.content"></quill-view> 来呈现富文本。但我需要呈现与纯文本相同的内容。

我怎样才能以 ngx-quill / Angular 的方式做到这一点。请帮忙！我不想使用 JavaScript.

来获取 DOMElement.text() 方法

Answer 1

我不知道羽毛笔..

所以可能会有另一个好的解决方案

我想你可以用像这样的管道解决这个问题

@Pipe({ name: 'truncateHtml' })
export class TruncateHtmlPipe implements PipeTransform{

    constructor() { }

    transform(text: string ) {

        if (!text) {
            return text;
        }

        let without_html = text.replace(/<(?:.|\n)*?>/gm, ' ');
        
        return without_html;
    }

}

如果您不想在模板中使用

只是return那个值并使用它

希望对你有帮助

Answer 2

我想你可以这样使用innerHTML

<div [innerHTML]="blogPost"></div>

我之前也用过 Quill

在 Angular 中将 HTML 字符串显示为纯文本

Show HTML string as plain text in Angular

quill

angular

ngx-quill