下一行中的Angular 4显示p标记的换行符

Question

我有一个角度为4的页面,我必须显示用户评论列表.用户可以在多行输入注释.我想在多行中绑定文本.我想\n在新行中显示文本.

我试过了

<p [innerHTML]="comment.text"></p>
          &
<p>{{comment.text}}</p>

我不想\n用<br>tag 替换.我想要别的东西.

如果它可以在绑定方面完成,那将是伟大的.

Answer 1

利用white-space: pre-line;风格.添加一个样式类,例如multi_lines_text并将其添加到<p>:

在您的组件css中:

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

并在您的模板中:

<p class="multi_lines_text" [innerHTML]="comment.text"></p>

链接到StackBlitz演示.