Angular，如何在没有 HTML 标签的情况下显示文本？答案

【问题标题】：Angular, How to display text without the HTML tags?Angular，如何在没有 HTML 标签的情况下显示文本？
【发布时间】：2021-11-18 06:31:57
【问题描述】：

我在 localStorage 中存储了一个带有 HTML 标记的字符串，因为我使用了 ngx-quill（Angular 富文本编辑器），它以 HTML 格式的文本存储数据。

这就是我的 localStorage 的样子：

从上图可以看出，在描述中，有p个标签。

有什么方法可以在没有标签的情况下在 Angular 页面上显示它？

【问题讨论】：

您应该为此使用 [innerHTML]，例如：<div [innerHTML]="item.description"></div>
这能回答你的问题吗？ Using Angular 2+ [innerHTML] to add html including style attributes

标签： html angular

【解决方案1】：

您需要使用 innerHTML 并确保您信任包含 script 标签的 HTML，否则 Angular 会抛出错误。

执行以下操作，创建一个 safeHTML 管道：

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(html: string): any {
            return this.sanitizer.bypassSecurityTrustHtml(html);
        }
    }

然后像这样将它与innerHTML一起使用：

<span [innerHTML]="description" | sanitizeHtml"></span>

【讨论】：

这不是您清理的方式，而是您不应该按原样“信任”内容的方式。请参考angular.io/api/platform-browser/DomSanitizer#sanitize

【解决方案2】：

为此使用：[innerHTML]，例如：

<div [innerHTML]="data.description"></div>

【讨论】：