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

在Angular 6中向用户显示保存通知弹出窗口，可以通过以下步骤实现：

创建一个保存通知组件：首先，创建一个保存通知组件，可以命名为SaveNotificationComponent。该组件将负责显示保存通知的弹出窗口。
在需要显示保存通知的地方引入组件：在需要显示保存通知的地方，比如保存按钮的点击事件处理函数中，引入SaveNotificationComponent组件。
在组件中使用弹出窗口：在SaveNotificationComponent组件的模板文件中，使用合适的样式和布局来展示保存通知的内容。可以使用Angular Material的MatSnackBar组件来实现弹出窗口的效果。
在保存按钮的点击事件处理函数中调用弹出窗口：在保存按钮的点击事件处理函数中，通过调用MatSnackBar组件的open方法来显示保存通知的弹出窗口。可以传递一些参数，比如通知的文本内容、持续时间等。

以下是一个示例代码：

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, // 弹出窗口持续时间
    });
  }
}

在上述示例中，SaveNotificationComponent组件负责显示保存通知的弹出窗口，SaveButtonComponent组件是一个保存按钮的示例，点击按钮时会调用弹出窗口。可以根据实际需求进行样式和布局的调整。

推荐的腾讯云相关产品：在腾讯云中，可以使用云函数（Serverless Cloud Function）来实现保存通知的功能。云函数是一种无服务器的计算服务，可以帮助开发者在云端运行代码，无需关心服务器的运维和扩展。您可以通过腾讯云云函数的官方文档了解更多信息：云函数产品介绍。