MatSnackBar 是一个用来显示快餐栏通知的服务。

打开快餐栏

快餐栏可以包含一个字符串消息或指定的组件。

// Simple message.
let snackBarRef = snackBar.open('Message archived');

// Simple message with an action.
let snackBarRef = snackBar.open('Message archived', 'Undo');

// Load the given component into the snackbar.
let snackBarRef = snackBar.openFromComponent(MessageArchivedComponent);

无论哪种形式，都会返回一个 MatSnackBarRef。它可以用来关闭快餐栏或在快餐栏关闭时接收通知。对于只有一个操作的简单消息，当该动作被触发时，MatSnackBarRef 会暴露出一个 Observable。如果你要关闭一个用 openFromComponent 打开的自定义快餐栏，可以在该组件中注入一个 MatSnackBarRef。

snackBarRef.afterDismissed().subscribe(() => {
  console.log('The snackbar was dismissed');
});


snackBarRef.onAction().subscribe(() => {
  console.log('The snackbar action was triggered!');
});

snackBarRef.dismiss();

关闭

可以调用由 open 调用返回的 MatSnackBarRef 中的 dismiss 方法来手动关闭快餐栏。

同一时刻只能打开一个快餐栏。如果在显示前一个消息时打开一个新的快餐栏，老的消息就会自动关闭。

快餐栏还可以通过一个可选的配置对象来指定持续时间：

snackBar.open('Message archived', 'Undo', {
  duration: 3000
});

你可以传入 data 属性，来与 openFromComponent 打开的自定义快餐栏共享数据。

snackBar.openFromComponent(MessageArchivedComponent, {
  data: 'some data'
});

要在组件中访问该数据，可以使用依赖注入令牌 MAT_SNACK_BAR_DATA：

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

@Component({
  selector: 'your-snackbar',
  template: 'passed in {{ data }}',
})
export class MessageArchivedComponent {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: string) { }
}

标记自定义快餐栏内容

通过 snackBar.openFromComponent 方法打开自定义 snackbar 时，你可以使用以下指令来标记内容并确保其样式与通过 snackBar.open 打开的一致。

matSnackBarLabel - 标记要向用户显示的快餐栏文本
matSnackBarActions - 标记包含任何操作按钮的容器元素
matSnackBarAction - 标记一个单独的操作按钮

如果不使用标记，所有内容将被视为文本内容。

设置全局配置的默认值

如果你要覆盖快餐栏的默认选项，可以使用 MAT_SNACK_BAR_DEFAULT_OPTIONS 令牌。

@NgModule({
  providers: [
    {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 2500}}
  ]
})

无障碍性

MatSnackBar 通过 aria-live 区域来播报消息。虽然默认情况下公告会使用 polite 设置，但你也可以通过设置 MatSnackBarConfig 的 politeness 属性来自定义它。

MatSnackBar 不会将焦点移动到快餐栏元素。像这样移动焦点会在工作流程中扰乱用户。对于快餐栏中提供的任何操作，你的应用程序都应该提供执行该操作的替代方法。替代交互通常是键盘快捷键或菜单选项。一旦用户执行相应的操作，你应该关闭快餐栏。快餐栏可以包含一个单独的动作和一个额外的可选“关闭”或“取消”动作。

尽量不要为具有可用操作的快餐栏设置 duration ，因为屏幕阅读器用户可能希望导航到快餐栏上的元素以激活该操作。如果用户在快餐栏中手动移动了他们的焦点，你应该将焦点返回到用户工作流程上下文中有意义的某个地方。

打开快餐栏

关闭

与自定义快餐栏共享数据

标记自定义快餐栏内容

设置全局配置的默认值

无障碍性