angular - Angular：如何在花括号内的字符串中呈现换行符？

Question

也许这是不可能的，但我想知道是否可以在传递给 MatDialogComponent 的字符串中嵌入换行符，通过{{ }}

我设计了一个简单WarningDialogComponent的带有标题、消息、确定和取消按钮文本的参数。

消息文本显示在模板内

<mat-dialog-content>
    {{message}}
</mat-dialog-content>

这很好用，除非我希望消息具有已定义的换行符，例如：

您即将删除帐户“电工”

这不能被撤消！

我尝试使用反引号，或\n\n嵌入message其中，我知道 html 通常被转义。当然，我可以重新设计我的表单，或者指示它呈现嵌入的 html，但希望有一种简单的方法可以以某种方式在包含在变量中的字符串中放置一个换行符，message而无需修改组件本身。

标签： angularangular-material

Answer 1

你可以做一些CSS的东西。mat-dialog-content 元素自动获取mat-dialog-content类。只需将此样式添加到全局样式表中的此类

.mat-dialog-content{white-space:pre;}

现在您的\n应被视为纯文本中的新行。请参考这个简单的stackblitz。

谢谢。