Angular2 Material Snackbar-如何包含html

Question

如何在发送至Angular 2材质的快餐栏的消息中包含html？例如。如果我要发送 或图标等样式？

Answer 1

我认为你不能那样做。 mat-snackbar接受MatSnackBarConfig，您可以在其中配置一些内容，请参见：https://material.angular.io/components/snack-bar/api#additional_classes

如果您需要高度的自定义，也许您应该编写自己的自定义快餐栏。

编辑：正如kav所说，您可以使用openFromComponent（），尝试在material.angular.io中提供的stackblitz

Answer 2

您应该使用类似的内容：

@Component({
  selector: 'snack-bar-component-example',
  templateUrl: 'snack-bar-component-example.html',
})
export class SnackBarComponentExample {
  constructor(public snackBar: MatSnackBar) {}

  openSnackBar() {
    this.snackBar.openFromComponent(PizzaPartyComponent, {
      duration: 500,
    });
  }
}

或选中Angular example

Answer 3

在我的项目中，我想向小吃栏中添加一个信息图标。我可以使用CSS中的内容来实现它

  .mat-snack-bar-container {
    color: rgb(255, 255, 255)!important;
    background-color: grey!important;
    opacity:0.9;
    span:before {
      content: '\26A0 ';
    }
 }

对于内容代码，我发现此链接很有帮助：https://www.toptal.com/designers/htmlarrows/symbols/