具有多个 Action 的 Angular Material Snackbar

Question

是否可以在 Angular Material snackbar 中执行多个操作？

我知道可以将您自己的组件用于 snackbar 。

但是对于这段代码，action只是一个action

private snackBar: MatSnackBar;

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

Answer 1

我正在使用 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
    }

  }

引用官方文档here .