具有多个动作的角度材质捕捉栏

Question

在一个角度材质快餐栏中可以有多个动作吗？

我知道你可以使用你自己的组件来创建快餐栏。

但对于此代码，操作只是一个操作

private snackBar: MatSnackBar;

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

Answer 1

演示: SnackBar created using Bottom Sheet

我没有发现两个动作在SnackBars中工作，但使用BottomSheet组件实现了一个具有两个动作的snackBar。

场景:

我在项目中也有同样的要求。

通知是使用snackBar在整个项目中显示的，并且对于一个动作，使用snackBar可以很容易地处理。

问题:

• 但是，需要在snackBars中添加2个或多个操作，因为通知完全是通过项目中的snackBars处理的。

实现的解决方案:

为了复制project.

• Demo项目中使用的snackbar，
• 创建了BottomSheet并设置了样式: Project

​

​

打开SnackBar :

​

Answer 2

我使用的是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。

Answer 3

您可以连接到snackbars、MatSnackBarRef.dismiss()和MatSnackBarRef.dismissWithAction()方法。例如，您可以通过为它们中的每一个指定一个按钮来明确地实现这一点。

MatSnackBarRef.afterDismissed()做点什么。

MatSnackBarRef.onAction()做一些其他的事情。

(请注意下面示例中的“第三个操作”，其中“了解更多...”是这些术语的链接。)

​

​