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

Question

我想添加多行短信，并提供由我提供的正确换行符。

  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中显示的文本。 现在，snackbar从文本中省略\n并对齐整个消息，如下图所示

Answer 1

我刚刚添加了空白：预包装

// ts

Users

// css

const msg: string = `Registration successful. \n Please, confirm your email`;   
this._snackBar.open(msg, '', {
    duration: 8000,
    panelClass: ['success-snackbar']
});

Answer 2

您的解决方案是创建snackbar组件。

没有看到你的代码，我猜你大概有这样的事情：

this.snackBar.open(this.sampleStringErrorMsg, null, {
  verticalPosition: 'top'
});

据我所知，没有办法达到你想要的效果。

1. 创建一个组件。我称之为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>

1. 确保ErrorSnackBarComponent下的app.module.ts被引用：

   • 声明
   • entryComponents

2. 使用您最近创建的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>
  });

并且您应该可以使用data中的ErrorSnackBarComponent并显示您的错误消息以及任何其他详细信息，例如属性。

snackbar的{​​p> Here is the documentation供您参考。

Answer 3

我的声誉太低，无法直接发表评论。我建议在 Marias answer 中添加一个。

我使用的是 Angular v7.3.7 并且必须添加 ::ng-deep，当我将 CSS 放置在这样的组件 CSS 文件中时

::ng-deep .success-snackbar {
   background: #1fcd98;
   white-space: pre-wrap
}

为了让它工作。或者，您可以将 CSS 添加到项目的全局 style.css 文件中。

Answer 4

来晚了……但是我只需要解决这个问题，发现创建了一个函数，可以用作品中的换行符“重新构建”字符串：

  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;
  }