在小吃店 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 是我在零食栏中显示的文本。现在零食栏\n从文本中省略并对齐整个消息，如下图所示

Answer 1

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

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

Answer 2

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

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

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

据我所知，没有办法通过像上面那样做来实现你想要的。

1. 创建一个组件。我会打电话给它ErrorSnackBarComponent。在html添加错误消息的内容上。它看起来像这样：

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

2. 确保在下面ErrorSnackBarComponent引用app.module.ts：

   • 声明
   • 入口组件

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

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

这里是文档的snackbar，供大家参考。