角材料中的MatSnackBar

在Angular框架中，MatSnackBar是一个基于Material Design语音设计的成品组件，它提供了一个用户友好的通知区域，并提供了一个简单地方式来在你的应用程序中展示消息。

特点

• 使用户更容易地关注您的消息，而不妨碍他们看到您的应用程序
• 可扩展性：可自定义文本、持续时间、颜色等，以适合您的需求
• 容易使用：只需调用一个方法即可设置消息的文本、样式和持续时间

示例

下面是一个使用MatSnackBar的简单示例，如下：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private snackBar: MatSnackBar) {}

  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
    });
  }
}

其中，openSnackBar()方法是在点击一个按钮时触发的，它会打开一个MatSnackBar。在这个例子中，MatSnackBar会显示一个简短的消息，持续2秒钟。

自定义MatSnackBar

MatSnackBar组件可以通过MAT_SNACK_BAR_DEFAULT_OPTIONS提供的默认选项来自定义，也可以通过snackBar.open()方法的参数来自定义。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  simpleSnackBarConfig: MatSnackBarConfig = {
    duration: 5000,
    horizontalPosition: 'center',
    verticalPosition: 'bottom',
  };

  constructor(private snackBar: MatSnackBar) {}

  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, this.simpleSnackBarConfig);
  }
}

在这个例子中，我们添加了一个Snack Bar的配置对象到AppComponent中，它提供了持续时间、水平和垂直位置，以及其他选项。这些选项可以通过传递这个配置对象到snackBar.open()方法中进行自定义。

总结

MatSnackBar提供了一种简单的方式来向用户展示消息，它可定制化的功能使得它能够满足您应用的需求。MatSnackBar是 Angular Material 的一部分，并且与 Angular Material 密切集成。MatSnackBar也是一个符合 Material Design 的设计元素。