在小吃店Angular 4中添加换行符答案

【问题标题】：To add line break in snack bar Angular 4在小吃店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 并对齐整个消息，如下图所示

【问题讨论】：

标签： angular snackbar

【解决方案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 供您参考。

【讨论】：