Angular Material 7 – SnackBar

Angular Material 7 是 Angular 官方推出的一套前端 UI 框架。其中的 SnackBar 组件是提供给开发者的一种类似于浏览器默认通知弹窗的组件。它可以在你页面的角落以浮动形式展示一个信息提示，且具有关闭按钮和用户响应事件。下面，我们将详细讲述 SnackBar 的用法。

安装 Angular Material

在使用 SnackBar 前必须先安装 Angular Material，安装方式很简单，在 Angular Cli 中运行以下命令即可：

ng add @angular/material

这个命令将会提示你输入 Angular Material 主题，你可以根据项目配色自行选择。在安装完成后，我们可以引入 SnackBar 组件。

引入 SnackBar

在你的 Angular 项目中，你可以使用以下语句引入 SnackBar：

import { MatSnackBar } from '@angular/material';

如果你需要在模板文件中使用 SnackBar，还需要在模块文件中导入 MatSnackBarModule：

import { MatSnackBarModule } from '@angular/material/snack-bar'; 

@NgModule({
  imports: [ MatSnackBarModule ],
  ...
})
export class AppModule { }

使用 SnackBar

在你的组件中，你需要先注入 MatSnackBar：

constructor(public snackBar: MatSnackBar) { }

然后，使用以下代码来展示一个 SnackBar：

this.snackBar.open('提示信息', '关闭', { duration: 3000 });

这里我们传入三个参数，分别代表 展示的信息、关闭按钮的文本 和 SnackBar 存在的时间。当然，你可以省略其中的任何一个参数——即，若没有传入关闭按钮的文本，则不会显示关闭按钮;若不传入 Snackbar 存在的时间，则 Snackbar 将一直展示，直到用户手动关闭。

此外，SnackBar 还可以响应用户的点击事件，你可以使用以下代码来监听用户点击事件：

this.snackBar.open('提示信息', '关闭', { duration: 3000 }).onAction().subscribe(() =>{
  console.log('用户点击了"关闭"');
});

你也可以给 SnackBar 定义样式类，以与你的主题相吻合：

this.snackBar.open('提示信息', '关闭', { duration: 3000, panelClass: ['info-snackbar'] });

这里我们在 styles.scss 文件中定义如下类：

.info-snackbar{
  background-color: #33aa99;
  color: #fff;
  font-size: 16px;
}

结论

Angular Material 中的 SnackBar 组件是非常实用的。它为我们展示消息提供了良好的 UI 体验，并且其 API 非常简单，开发者能够轻松地掌握它的用法。在你需要向用户展示消息时，不妨尝试使用 SnackBar。