Angular Material Snackbar能否实现多操作？单操作代码无法区分触发源

嘿，这个问题我之前也踩过坑！默认的MatSnackBar确实只支持单个操作按钮，直接用onAction()的话，根本没法区分到底点了哪个按钮——不过别担心，咱们通过自定义Snackbar组件就能完美解决，而且实现起来一点都不复杂。

为什么默认方式不行？ #

默认的MatSnackBar.open()方法里的action参数只能传一个按钮文本，对应的onAction()订阅只会触发一次，完全没有办法区分多个操作的差异，所以想加多个按钮的话，自定义组件是必经之路。

具体实现步骤 #

1. 创建自定义多操作Snackbar组件 #

首先新建一个组件，比如叫MultiActionSnackbarComponent，咱们在模板里放多个操作按钮，每个按钮绑定不同的点击事件：

<!-- multi-action-snackbar.component.html -->
<div class="snackbar-content">
  <span>{{ data.message }}</span>
  <div class="action-buttons">
    <button mat-button color="primary" (click)="triggerAction('confirm')">确认</button>
    <button mat-button (click)="triggerAction('cancel')">取消</button>
    <button mat-button color="accent" (click)="triggerAction('view-details')">查看详情</button>
  </div>
</div>

然后在组件类里，咱们通过MatSnackBarRef把操作类型传递回调用方：

// multi-action-snackbar.component.ts
import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';

@Component({
  selector: 'app-multi-action-snackbar',
  templateUrl: './multi-action-snackbar.component.html',
  styleUrls: ['./multi-action-snackbar.component.scss']
})
export class MultiActionSnackbarComponent {
  constructor(
    private snackBarRef: MatSnackBarRef<MultiActionSnackbarComponent>,
    @Inject(MAT_SNACK_BAR_DATA) public data: { message: string }
  ) {}

  triggerAction(actionType: string) {
    // 关闭Snackbar，并把操作类型作为数据传递回去
    this.snackBarRef.dismiss(actionType);
  }
}

2. 配置模块 #

把这个自定义组件添加到你的模块声明里（Angular 9+之后不需要entryComponents了，旧版本记得加上）：

// your-module.ts
import { NgModule } from '@angular/core';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MultiActionSnackbarComponent } from './multi-action-snackbar.component';

@NgModule({
  declarations: [MultiActionSnackbarComponent],
  imports: [MatSnackBarModule],
  // entryComponents: [MultiActionSnackbarComponent] // Angular 9+ 可省略
})
export class YourFeatureModule { }

3. 使用自定义Snackbar并区分操作 #

现在在你的业务组件里，调用openFromComponent打开自定义Snackbar，然后监听afterDismissed()事件获取操作类型：

// your-business.component.ts
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MultiActionSnackbarComponent } from './multi-action-snackbar.component';

@Component({
  selector: 'app-your-business',
  templateUrl: './your-business.component.html'
})
export class YourBusinessComponent {
  constructor(private snackBar: MatSnackBar) {}

  showMultiActionSnackbar() {
    const snackBarRef = this.snackBar.openFromComponent(MultiActionSnackbarComponent, {
      data: { message: '您有一条待处理的请求' },
      duration: 8000, // 可选：设置自动关闭时长，0表示不自动关闭
      horizontalPosition: 'end',
      verticalPosition: 'top'
    });

    // 监听Snackbar关闭事件，获取操作类型
    snackBarRef.afterDismissed().subscribe(result => {
      if (result.dismissedByAction) {
        console.log('触发的操作：', result.data);
        // 根据不同操作类型执行对应逻辑
        switch(result.data) {
          case 'confirm':
            console.log('用户点击了确认，执行确认逻辑');
            break;
          case 'cancel':
            console.log('用户点击了取消，执行取消逻辑');
            break;
          case 'view-details':
            console.log('用户点击了查看详情，跳转到详情页');
            break;
        }
      }
    });
  }
}

4. 优化样式（可选） #

为了让多个按钮排列更美观，可以给组件加一点样式：

/* multi-action-snackbar.component.scss */
.snackbar-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}

.action-buttons {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

额外小贴士 #

• 如果需要动态生成按钮，可以在data里传递按钮配置数组（比如{ label: string, action: string }[]），然后在模板里用*ngFor循环渲染
• 可以给按钮添加不同的color属性（primary/accent/warn）来区分重要程度
• 如果不需要自动关闭，把duration设为0即可

内容的提问来源于stack exchange，提问作者Dev Db