【问题标题】: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 页面上显示它?

【问题讨论】:

标签: 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>

【讨论】:

【解决方案2】:

为此使用:[innerHTML],例如:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-25
    • 2019-10-07
    • 2010-12-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多