Angular 4 Snackbar自定义换行多行文本显示问题

Angular Material的Snackbar默认会把文本当成单行渲染，直接忽略字符串里的\n换行符，不过有几个实用的办法可以解决这个问题，我给你整理好了：

方法一：通过CSS样式让换行符生效（最简单） #

这个方法不需要修改组件逻辑，只需要加一行全局样式就能让原有字符串的换行生效：

1. 打开你的全局样式文件（比如src/styles.css），添加以下样式：

.mat-snack-bar-container .mat-simple-snackbar {
  white-space: pre-line;
}

pre-line这个CSS属性会保留字符串里的换行符，同时自动合并多余的空格，完美适配你的错误列表格式。

2. 保持你原来的错误字符串结构（可以把换行写成明确的\n，可读性更好）：

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.';

3. 正常调用Snackbar即可：

this.snackBar.open(this.sampleStringErrorMsg, 'Close', {
  duration: 5000,
});

现在Snackbar就会自动把每一行分开显示了。

方法二：使用自定义Snackbar组件（更灵活） #

如果需要给多行文本加样式（比如给列表项加缩进、自定义颜色），可以创建自定义组件来完全控制内容：

1. 创建一个新的组件（比如multi-line-snackbar.component.ts）：

import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material';

@Component({
  template: `
    <div class="custom-snackbar">
      <p>{{ data.title }}</p>
      <ul>
        <li *ngFor="let item of data.items">{{ item }}</li>
      </ul>
    </div>
  `,
  styles: [`
    .custom-snackbar {
      color: #fff;
    }
    ul {
      margin: 8px 0 0 0;
      padding-left: 20px;
    }
  `]
})
export class MultiLineSnackbarComponent {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {}
}

2. 在你的模块里把这个组件加入entryComponents（Angular 4动态加载组件必须配置这个）：

@NgModule({
  declarations: [MultiLineSnackbarComponent],
  entryComponents: [MultiLineSnackbarComponent],
  // ...其他模块配置
})
export class AppModule {}

3. 调用Snackbar时使用openFromComponent方法，传入你的数据：

this.snackBar.openFromComponent(MultiLineSnackbarComponent, {
  duration: 5000,
  data: {
    title: 'The sample is not valid:',
    items: [
      'The key and key value are required in the sample.',
      'The delimiter must be entered when the sample contains several key-value pairs.',
      'The delimiter must not be equal to the key or key value.'
    ]
  }
});

这种方式可以自由定制Snackbar的布局和样式，适合复杂的展示需求。

方法三：使用HTML标签结合innerHTML（需注意安全） #

如果你不想加全局样式，也可以把字符串改成带<br>的HTML格式，然后通过自定义模板渲染：

1. 定义带HTML标签的错误字符串：

this.sampleStringErrorMsg = `The sample is not valid:<br>
- The key and key value are required in the sample.<br>
- The delimiter must be entered when the sample contains several key-value pairs.<br>
- The delimiter must not be equal to the key or key value.`;

2. 调用Snackbar时传入自定义模板逻辑：

this.snackBar.open('', 'Close', {
  duration: 5000,
  data: this.sampleStringErrorMsg,
  panelClass: 'html-snackbar'
});

然后在全局样式里添加：

.html-snackbar .mat-simple-snackbar span {
  display: block;
}

⚠️ 注意：如果你的错误信息包含用户输入的内容，使用innerHTML可能会有XSS安全风险，所以只推荐用于自己完全可控的静态文本。

内容的提问来源于stack exchange，提问作者Sarfraz Shaikh