Angular Material Snackbar

2025年3月17日 | 阅读 3 分钟

<MatSnackBar> 是一个 Angular 指令，用于显示一个通知栏，在移动设备上显示为对话框或弹出窗口。它是一个用于显示快餐栏通知的服务。

打开Snackbar

一个快餐栏包含一个字符串消息。

let snackBarRef = snackBar.open('Message archived');
let snackBarRef = snackBar.open('Message archived', 'Undo');
// Load the component in the snack-bar.
let snackBarRef = snackbar.openFromComponent(MessageArchivedComponent);

它用于获取有关拒绝快餐栏的信息。 MatSnackBarRef 暴露了该动作通过简单消息的动作触发。如果你想注入 MatSnackBarRef 然后关闭由 OpenFromComponent 打开的自定义快餐栏。

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


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

snackBarRef.dismiss();

快餐栏可以手动拒绝，可以通过在 matsnackbar 上调用 dismissal 方法进行调用来打开。

一次只能打开一个快餐栏。如果在显示之前的消息时打开新的快餐栏，则会自动拒绝旧消息。

可以通过可选的配置对象为快餐栏指定时间段

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

与自定义快餐栏共享数据

您可以使用自定义快餐栏共享数据，该快餐栏由 openFromComponent 方法打开。

snack bar.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-snack-bar',
  template: 'passed in {{ data }}',
})
export class MessageArchivedComponent {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: string) { }
}

通过默认值设置全局配置。

如果要覆盖快餐栏选项，可以使用 MAT_SNACK_BAR_DEFAULT_OPTIONS 注入令牌。

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

可访问性

快餐栏消息通过 aria-live 区域宣布。快餐栏不会聚焦在元素上。建议应用程序为用户提供另一种方式来执行快餐栏中任何给定任务的任务。

不应为快餐栏可用的操作指定持续时间，以适应希望激活该操作以导航快餐栏元素的屏幕阅读器用户。如果用户将注意力集中在快餐栏中，则必须根据应用程序的上下文在某个地方合理地放置焦点，当快餐栏被拒绝时。

切勿使用“dismissal”作为快餐栏操作，而是在没有其他通知操作时，更喜欢使用时间段。

示例

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule,MatSnackBarModule} from '@angular/material'
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule,MatSnackBarModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<button mat-button (click)="openSnackBar('Party', 'act')">Show snack-bar</button>

app.component.ts

import {Component, Injectable} from '@angular/core';
import { MatSnackBar } from "@angular/material";
@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']
})
export class AppComponent {
   constructor(public snackBar: MatSnackBar) {}
   openSnackBar(message: string, action: string) {
      this.snackBar.open(message, action, {
         duration: 2000,
      });
   } 
}   

输出

说明

我们使用 mat-button 创建了一个按钮。单击该按钮后，我们将显示快餐栏。

下一个主题Angular Material Fab-Toolbar

← 上一个下一个 →

Angular Material Snackbar

打开Snackbar

与自定义快餐栏共享数据

通过默认值设置全局配置。

可访问性

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions