角度中的只读组件不显示换行符答案

【问题标题】：Readonly component in angular doesn't show line breaks角度中的只读组件不显示换行符
【发布时间】：2019-04-11 09:11:14
【问题描述】：

我正在使用 C# 应用程序开发 Angular。而且我有一些只读组件用于显示数据库中保存的数据。例如，我在 Textarea 组件中放入以下文本：

hello 

there




hello

所以这是空格。然后它将正确保存在数据库中。因为当我选择编辑时，文本将显示正确。但是在我保存文本后，我选择了文本的详细信息。然后，alinea 没有正确显示。因为alinea的被删除了。

我尝试使用<pre></pre>，但文本的格式会正确，但会破坏布局。

如果我这样做：

  <pre>
    <afw-readonly [resources]="resources" fieldResourceKeyPrefix="beschrijving"
      [fieldValue]="learningPathDetails.description" [enableHtml]="false" 
      [readMoreCharLimit]="300"
      ></afw-readonly>
  </pre>

然后格式将正确显示。但是布局被破坏了。

那么如何纠正呢？谢谢

【问题讨论】：

标签： javascript c# angular readonly

【解决方案1】：

<pre> 对维护换行非常有用，但它会破坏布局。问题是你可以使用 CSS 来做同样的事情。

var someText = `This is some text with some new lines.
Line 1
Line 2

Line 3. Kewl.`;

$("pre").text(someText);

$(".simulate-pre").text(someText);

$(".no-pre").text(someText);

.margins * {
  margin: 5px 0;
}

.real-pre {
  border: 1px solid red;
}

.simulate-pre {
  border: 1px solid purple;
  white-space: pre-line;
}

.no-pre {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="margins">
  <pre class="real-pre"></pre>
  <div class="simulate-pre"></div>
  <div class="no-pre"></div>
</div>

【讨论】：