Угловой материал snackbar с несколькими действиями

Возможно ли иметь несколько действий в снекбаре Angular Material?

Я знаю, что для закусочной можно использовать свой собственный компонент.

Но для этого кода действие - это только одно действие

private snackBar: MatSnackBar;

this.snackBar._openedSnackBarRef.onAction().subscribe(
  () => {
    console.log('action has occurred, but which one?')
  }
);

Снекбары материалов поддерживают только одно действие

bugs 11.04.2018 15:36

Снэкбары больше предназначены для уведомлений, чем для действий. Если вам нужны действия, рассмотрите возможность просмотра модального или нижнего листа.

Chad K 10.08.2018 17:00
12
2
8 793
3

Ответы 3

Вы можете объявить строку действия (например, actionSelected) внутри функции и вызывать эту функцию (openSnackBar) всякий раз, когда вы хотите открыть закусочную, вот так:

openSnackBar(message: string, action:string, response:any) {
    let actionSelected:string = action;
    let snackBarRef = this.snackBar.open(message, this.snackbarActions[action], {duration:3000});;
    console.log("response");
    console.log(response);
    snackBarRef.onAction().subscribe(() => {
        if(actionSelected == "view_sf"){
            window.open('https://eu12.lightning.force.com/lightning/r/Lead/'+response.id.toString()+'/view', "_blank");
        }else if(actionSelected == "view_odoo"){
            window.open("https://tienda.prokom.es/web#id="+response["result"].toString()+"&view_type=form&model=crm.lead&action=286");
        }
    });
}

Демо:SnackBar, созданный с использованием нижнего листа

Я не нашел 2 действий, работающих в Закусочная, но реализовал закуску с 2 действиями с использованием компонента BottomSheet.

Сценарий:
I имел такое же требование в проекте.
Уведомления отображались с помощью SnackBar во всем проекте, и для одного действия их легко обрабатывать с помощью SnackBar.

Проблема :

  • Но требовалось добавить 2 или несколько действий в SnackBars, поскольку уведомления полностью обрабатывались через SnackBars в проекте.

Достигнутое решение:

Click on any tab to open a SnackBar

Открытый SnackBar:

Open SnackBar using BottomSheet

Я использую Angular9, и у нас есть возможность использовать пользовательский компонент внутри SnackBar. Вот пример кода:

Внутри вызываемого компонента:

    openSnackBar(message) {
        this.snackBar.openFromComponent(CustomSnackBarComponent, {
            duration: 5 * 1000,
        });
    }

Пользовательский компонент:

@Component({
    selector: 'snack-bar-component-example-snack',
    template: `<div class="example-pizza-party">
               <button mat-raised-button (click)="cancel()">Cancel </button>
               <button mat-raised-button (click)="doAction()">View Results </button>
               </div>`,
    styles: [`
      .example-pizza-party {
        color: green;
      }
    `],
  })
  export class CustomSnackBarComponent {

    constructor(private router: Router) { }

    doAction() {
        // you can do some action here
    }

    cancel() {
      // close the snackbar or wirte another action
    }

  }

Обратитесь к официальной документации здесь.

Другие вопросы по теме