具有多个动作的角材质 Snackbar答案

【问题标题】：Angular material Snackbar with multiple actions具有多个动作的角材质 Snackbar
【发布时间】：2018-09-21 07:51:26
【问题描述】：

是否可以在 Angular Material 小吃栏中有多个操作？

我知道可以将您自己的组件用于小吃栏。

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

private snackBar: MatSnackBar;

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

【问题讨论】：

材质小吃店只支持一个动作
Snackbars 更多的是用于通知而不是操作。如果您需要操作，请考虑查看模态表或底部表

标签： angular angular-material

【解决方案1】：

演示： SnackBar created using Bottom Sheet

我还没有找到在 SnackBars 中工作的 2 个动作，但使用 BottomSheet 组件实现了一个带有 2 个动作的snackBar。

场景：
我在项目中有同样的要求。
在整个项目中，通知都是使用snackBar显示的，对于一个动作，使用snackBar很容易处理。

问题：

但是，需要在作为通知的snackBars 完全通过snackBars 处理在项目中。

解决方案：

以复制项目中使用的快餐栏的方式创建并设置了 BottomSheet 的样式。
演示项目： https://stackblitz.com/edit/angular-bottomsheet-as-snackbar?file=src%2Fapp%2Fapp.component.html

已打开 SnackBar :

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

您可以连接到snackbars MatSnackBarRef.dismiss() 和MatSnackBarRef.dismissWithAction() 方法。例如，您可以通过为每个按钮指定一个按钮来显式执行此操作。

MatSnackBarRef.afterDismissed() 做点什么。

MatSnackBarRef.onAction() 做点别的。

（请注意下面示例中的“第三个操作”，其中“了解更多...”是指向条款的链接。）

【讨论】：

【解决方案4】：

您可以在函数中声明操作字符串（即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");
        }
    });
}

【讨论】：