Angular 具有多个动作的角度材质蛇形条

在一个有角度的材质snackbar中是否可能有多个动作

我知道可以使用您自己的组件制作snackbar

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

private snackBar:matsnakbar；
此.snackBar.\u打开了nackbarref.onAction（）.subscribe(
() => {
console.log（'已发生操作，但是哪一个？'）
}
);

您可以在函数中声明操作字符串（即actionSelected），并在需要打开snackbar时调用该函数（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");
        }
    });
}

演示：

我没有发现有2个操作在中工作，但使用组件实现了一个包含2个操作的snackBar

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

问题：

• 但是，有一项要求是在 snackbar作为通知完全通过snackbar处理 在这个项目中

实现的解决方案：

• 以复制项目中使用的snackbar的方式创建底部表单并设置其样式
• 演示项目：

打开的SnackBar:

---

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

  }

自定义组件：

    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
    }

  }

@组件({
选择器：“快餐店组件示例快餐店”，
模板：`
取消
查看结果
`,
风格：[`
.比萨饼派对的例子{
颜色：绿色；
}
`],
})
导出类CustomSnackBarComponent{
构造函数（专用路由器：路由器）{}
doAction（）{
//你可以在这里做一些动作
}
取消{
//关闭snackbar或执行其他操作
}
}

---

请参阅官方文档。

物料快捷键仅支持一个操作快捷键用于通知而非操作。如果你想要行动，考虑一下模态或底片。