-1

是否有方法添加材料图标（复选框）而不在快餐栏中创建另一个组件。

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

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

如何在 Angular 5 的 Angular 材质 Snackbar 内添加图标

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

在设计中需要以下小吃店

资源：

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

4

1 回答 1

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'
});
于 2020-07-14T19:55:57.913 回答