为什么我的 <br> 标签显示在我的浏览器中显示 angular 项目

Question

我有从文本区域保存的文本。我将它保存到数据库中。我现在想在提交后将此文本显示到另一个页面上。我想保持与原始文本输入相同的格式。

这是重定向到其他页面后浏览器上显示的内容。我将 br 替换为 --- 否则它会在本文中造成实际中断。 --- 等于 br

"M <---><---/> O <---/><---/>C<---/>Hub<---/>"

如何在没有 br 标签的情况下显示到页面上？我在其他情况下看到过这项工作，但不确定我做错了什么。

我已经能够使用 .replace 方法将输入替换为
。唯一的事情是，
标签出现在显示屏上。

x.component.ts

  getMessages() {
    this._messageBoardService.getMessages().subscribe(
      (data: any) => {
        this.msgList = data
        this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
      })

  }

x.component.html

<h3>{{ msgList[0].title }}</h3>
<p> {{ msgList[0].message }}</p>

没有断点的预期输出是

男

O

C 枢纽

Answer 1

如果只是为了显示目的添加一个 css 属性来显示你的换行符

<p class="message">{{ msgList[0].message }}</p>

.message { white-space: pre-line; }

在这种情况下，您的 api 抓取没有任何操作

getMessages() {
    this._messageBoardService.getMessages().subscribe(
      (data: any) => {
        this.msgList = data
      })
  }

或

否则你可以在 angular 中使用 innerHTML 属性

<p [innerHTML]="msgList[0].message"></p>

Answer 2

因为这就是 angular 的工作方式。它可以防止注入 "bad html"。要打印 html 你需要使用 DomSanitizer

更改您的代码

this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")

到

 this.msgList[0].message =  sanitizer.bypassSecurityTrustHtml(this.msgList[0].message.replace(/\n/g, "<br />"))

然后是模板

<p [innerHTML]="msgList[0].message"></p>

但是出于安全原因我不会这样做我最好用css

p.break-newline{
  white-space: pre-wrap
}

添加class

<p class="break-newline"> {{ msgList[0].message }}</p>

现在您无需在代码中修改消息。

为什么我的 <br> 标签显示在我的浏览器中显示 angular 项目

Why are my <br> tags showing in my browser display for angular project

html

frontend

line-breaks

display

angular