如何在 MatSnackBar 中使用 mat-icon？答案

【问题标题】：How to use the mat-icon in MatSnackBar?如何在 MatSnackBar 中使用 mat-icon？
【发布时间】：2019-04-27 07:04:23
【问题描述】：

我想在显示来自使用MatSnackBar 的服务消息服务的消息时显示一个图标。（Material 模块被导入到应用程序的模块中）。

但是，默认的快餐栏不支持图标。如何实现这样的功能？

import { Injectable } from '@angular/core'
import {MatSnackBar} from '@angular/material/snack-bar';
import {MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition} from "@angular/material";


@Injectable()

export class MessagesService {
    horizontalPosition: MatSnackBarHorizontalPosition = 'right';
    verticalPosition: MatSnackBarVerticalPosition = 'top';

    constructor(private snackBar: MatSnackBar) {
    }

    info(message: string) {
        const icon = `<mat-icon>info</mat-icon>`;
        const msg = `${icon} ${message}`;
        this.snackBar.open(msg, 'X', {
            duration: 2000,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition,
            panelClass: ['info-message']
        });
    }
}

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您必须使用自定义小吃栏组件才能显示图标。值得庆幸的是，这应该类似于您定义对话框以显示内容的方式，只是它是一个快餐栏而不是对话框。

可以将数据传递到快餐栏，就像将数据传递到对话框一样。

请注意，在声明小吃店时，您还必须在 NgModule 声明的 entryComponents 属性中导入它。

这是一个例子：

icon-snack-bar.component.ts

import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
// ...

@Component({
  selector: '...',
  template: `<mat-icon>{{ data?.icon }}</mat-icon> <span>{{ data?.message }}</span>`
  // Most likely you have to add styles in order to position the icon, although I haven't tested it yet
export class IconSnackBarComponent {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
}

my-component.component.ts

import { IconSnackBarComponent } from './icon-snack-bar/icon-snack-bar.component';
import { MatSnackBar } from '@angular/material/snack-bar';
// ...

export class MyComponent {
  constructor(private snackBar: MatSnackBar) { }
  openCustomSnackBar() {
    this.snackBar.openFromComponent(IconSnackBarComponent, {
      data: {
        message: 'Hello, snackbar!',
        icon: 'info'
      }
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { IconSnackBarComponent } from './icon-snack-bar/icon-snack-bar.component';
// ...

@NgModule({
  declarations: [
    // ...
    IconSnackBarComponent
  ],
  entryComponents: [
    IconSnackBarComponent
  ]
})
export class AppModule { }

这在文档here 中也有部分介绍。

【讨论】：

不能在不创建新组件的情况下使用 unicode 完成吗？只是好奇谢谢

【解决方案2】：

添加 Edric 的答案。

如果使用 flex 布局，您不需要额外的样式来对齐您的快餐栏内容。只需使用适当的 layoutAlign 值将内容包装在 div 中即可。

【讨论】：

你应该发表评论。
对不起。我需要声誉才能发表评论，而我只是在做类似的事情时遇到了这个问题。