Angular Material Snackbar：添加图标而不创建另一个组件

Question

有没有在 snackbar 中添加 Material 图标（复选框）而不创建另一个组件的方法。

也许通过 PanelClass 或 API 样式参数？我们有 100 多个带有简单文本的不同小吃店。如果可能，尽量避免创建 100 个额外的组件。

需要material消息左对齐的复选框（或任何垫子图标）。

How to add Icon inside the Angular material Snackbar in Angular 5

let snackBarMessage = `${this.products?.length} Successfully Added`;
this.snackBar.open(snackBarMessage, 'Close', {duration: 8000});

Need the following snackbar in design

资源：

https://material.angular.io/components/snack-bar/api

Answer 1

最佳做法是创建一个新组件，但您不需要 100 个新组件，1 个就可以了。

您可以创建一个 snackbar 消息组件，您可以使用 @Inject(MAT_SNACK_BAR_DATA);

注入任何类型的对象来描述行为

如果你有对象snackbar-message-data.ts

export interface SnackbarMessageData {
  checkable: boolean;
  text: string;
  action: string;
  icon: string;
}

@Component({
  template: `
    <input *ngIf="data.checkable" type="checkbox" />
    <mat-icon *ngIf="data.icon">{{ data.icon }}</mat-icon>
    <span>{{ data.text }}</span>
    <button
      mat-raised-button
      color="accent"
      (click)="snackBarRef.dismiss()"
    >
      {{ data.action }}
    </button>
  `,
})
export class SnackbarMessageComponent {
  constructor(
    public snackBarRef: MatSnackBarRef<TestNotificationComponent>
    @Inject(MAT_SNACK_BAR_DATA) public data: any
  ) { }
}

并且从打开快餐栏的父组件：

this.snackbar.openFromComponent(SnackbarMessageComponent, {
  checkable: true,
  text: `${this.products?.length} Successfully Added`,
  action: 'Close'
});

Angular Material Snackbar：添加图标而不创建另一个组件

Angular Material Snackbar: Add Icon Without Creating Another Component

typescript

angular-material

angular

angular10