Question

是否可以在Angular Material小吃栏中进行多项操作？

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

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

private snackBar: MatSnackBar;


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

Answer 1

演示： SnackBar created using Bottom Sheet

我尚未在SnackBars中找到2个动作，但是使用BottomSheet组件实现了带有2个动作的SnackBar。

场景：
我在项目中有相同的要求。
在整个项目中都使用了SnackBar来显示通知，并且一举执行，它就可以使用SnackBar轻松地进行处理。

问题：

但是，要求在操作界面中添加2个或多个操作点心栏，因为通知是通过点心栏完全处理的在项目中。

实现的解决方案：

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

打开了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

您可以在函数内声明操作字符串（即 actionSelected ），并在每次要打开小吃店时都调用该函数（ openSnackBar ）：< / p>

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具有多个动作

3 个答案: