Angular Панель закусок материалов: добавить значок без создания другого компонента

Question

Есть ли способ добавить значок материала (флажок) без создания другого компонента на панели закусок.

Может быть, через PanelClass или параметр стиля API? У нас есть сотни различных закусок с простым текстом. Попытка воздержаться от создания 100 дополнительных компонентов, если это возможно.

Флажок «Нужен материал» (или любой значок коврика) в левой части сообщения.

Как добавить значок внутри Angular материал Snackbar в Angular 5

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

Необходим следующий дизайн закусочной

Ресурс:

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

Answer 1

Лучшей практикой для этого будет создание нового компонента, но вам не понадобится 100 новых компонентов, подойдет 1.

Вы можете создать компонент сообщения закусочной панели, в который вы можете внедрить любой тип объекта вы sh, чтобы описать поведение, используя @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'
});