在小吃店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>

    确保ErrorSnackBarComponentapp.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 中添加图标

将新行 /n 转换为 angular 中的换行符

角度:段落标签中不打印换行符

Angular ng-content 正在丢失换行符。如何保持换行符完好无损?

如何在 Angular 小吃店中禁用背景?

Set-Content在我的文件末尾添加换行符(换行符,CRLF)