在小吃店Angular 4中添加换行符
Posted
技术标签:
【中文标题】在小吃店Angular 4中添加换行符【英文标题】:To add line break in snack bar Angular 4 【发布时间】:2018-08-30 10:19:09 【问题描述】:我想添加带有我提供的适当换行符的多行文本消息。
this.sampleStringErrorMsg = 'The sample is not valid:\n' +
'- The key and key value are required in the sample.\n ' +
'- The delimiter must be entered when the sample contains several key-value pairs.\n' +
'- The delimiter must not be equal to the key or key value.\n';
sampleStringErrorMsg 是我在快餐栏中显示的文本。
现在,snackbar 从文本中省略 \n
并对齐整个消息,如下图所示
【问题讨论】:
【参考方案1】:我的声誉太低,无法直接发表评论。我建议添加到Marias answer。
我使用 Angular v7.3.7 并且必须添加 ::ng-deep,当我将 CSS 放置在这样的组件 CSS 文件中时
::ng-deep .success-snackbar
background: #1fcd98;
white-space: pre-wrap
为了让它工作。或者,您可以将 CSS 添加到项目的全局 styles.css 文件中。
【讨论】:
【参考方案2】:我刚刚添加了空格:pre-wrap
// ts
const msg: string = `Registration successful. \n Please, confirm your email`;
this._snackBar.open(msg, '',
duration: 8000,
panelClass: ['success-snackbar']
);
//css
.success-snackbar
background: #1fcd98;
white-space: pre-wrap
【讨论】:
不错,这确实是最简单的解决方案【参考方案3】:聚会迟到了……但我刚刚解决了这个问题,发现创建一个函数可以用换行符“重新构建”字符串:
this.snackBar.open(
this.toNewLineString(this.snackBarText), 'Close',
panelClass: "snack-bar"
);
toNewLineString(input: string)
var lines = input.split('\\n');
var output = "";
lines.forEach(element =>
output += element + "\n";
);
return output;
【讨论】:
很好,它真的用空格替换了“\n”,但没有创建一个真正的新行,知道吗?【参考方案4】:您的解决方案是创建一个snackbar
组件。
没有看到你的代码,我猜你大致是这样的:
this.snackBar.open(this.sampleStringErrorMsg, null,
verticalPosition: 'top'
);
据我所知,没有办法通过像上面那样做来实现你想要的。
-
创建一个组件。我会叫它
ErrorSnackBarComponent
。
在html
上添加错误消息的内容。它看起来像这样:
<div>
<p>
<span>The sample is not valid:</span>
<br/>
<span>The key and key value are required in the sample.</span>
<br/>
<span>The delimiter must be entered when the sample contains several key-value pairs.</span>
<br/>
<span>The delimiter must not be equal to the key or key value.</span>
</p>
</div>
确保ErrorSnackBarComponent
在app.module.ts
下被引用:
使用您最近创建的snackbar
组件:
this.snackBar.openFromComponent(ErrorSnackBarComponent, verticalPosition: 'top' );
额外步骤
如果您想将数据传递给ErrorSnackBarComponent
,请将您的快餐栏组件的构造函数更改为:
constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any)
而不是 3.,使用这个:
this.snackBar.openFromComponent(ErrorSnackBarComponent,
verticalPosition: 'top',
data: <YOUR_DATA_HERE>
);
您应该能够使用ErrorSnackBarComponent
中的data
并将错误消息与任何其他详细信息(例如属性)一起显示。
Here is the documentationsnackbar
供您参考。
【讨论】:
以上是关于在小吃店Angular 4中添加换行符的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Angular 5 的 Angular 材质 Snackbar 中添加图标