如何在angular 6中向用户显示保存通知弹出窗口

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-save-notification',
  template: `
    <div class="save-notification">
      保存成功！
    </div>
  `,
  styles: [`
    .save-notification {
      background-color: #4CAF50;
      color: white;
      padding: 10px;
      text-align: center;
    }
  `]
})
export class SaveNotificationComponent {}

@Component({
  selector: 'app-save-button',
  template: `
    <button (click)="save()">保存</button>
  `
})
export class SaveButtonComponent {
  constructor(private snackBar: MatSnackBar) {}

  save() {
    // 调用弹出窗口
    this.snackBar.openFromComponent(SaveNotificationComponent, {
      duration: 2000, // 弹出窗口持续时间
    });
  }
}