Snackbar教程|mat-snackbar实例

什么是Snackbar UI组件？

Snackbar是设计前端应用程序的一个重要的UI元素。它是一个小的弹出窗口，显示反应式信息，接受用户的输入。它可以通过用户的操作来解散，无论是交换还是用户点击。

关于Material Snackbar设计组件的重要观点

• 默认情况下，它在屏幕的底部显示通知信息弹出窗口
• 它不会打断用户在当前页面的体验。
• 建议在一个页面上一次只显示一个小食栏
• 不需要用户操作
• 一段时间后自动消失
• 支持安卓、IOS和网络应用 在安卓系统中，用户在以下使用情况下会收到一条小吃店信息
• 互联网断线或线路
• 一些插件没有安装
• 用户通知的任何重要信息--记录删除，显示还原按钮 在本教程中，我们如何使用材料库在angular应用程序中实现一个小吃店？

Angular Snackbar配置

以下是提供给Snackbar组件的配置参数。

参数	描述
数据	传递给组件的数据
方向	传递给组件的数据
持续时间	消失前显示的时间（毫秒）。
面板类	用于自定义工具栏的css样式。
水平位置	水平位置--"开始"、"中心"、"结束"、"左"、"右
垂直位置	垂直位置--'顶'、'底'。

MatSnackBarModule "模块提供了与Snackbar相关的功能组件。

要使用这些组件，请按如下方式导入到你的应用程序模块中。

现在在app.module.ts中导入，该模块的所有组件都可以在你的所有组件中使用。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app.routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BasicSnackbarComponent } from './basic-snackbar/basic-snackbar.component';
import { MatButton, MatButtonModule } from '@angular/material/button';
import { MatSnackBarModule } from '@angular/material/snack-bar';


@NgModule({
  imports:      [ AppRoutingModule,BrowserModule,BrowserAnimationsModule, FormsModule,ReactiveFormsModule,MatButtonModule,MatSnackBarModule ],
  declarations: [ AppComponent,BasicSnackbarComponent],
  bootstrap:    [ AppComponent ],
  providers:[],
  exports:[BasicSnackbarComponent]
})
export class AppModule { }

简单的基本组件

本节涵盖了带有消息、动作和持续时间的基本组件。

这是一个例子，在点击按钮时显示简单的离线通知信息

在Html模板组件中:

• 在HTML组件中添加了物质按钮
• 提供了点击事件来显示简单的小吃店通知弹出窗口
• 将内容信息传递给点击事件方法，在弹出窗口中显示。

<button mat-raised-button color="primary" (click)="showSnackbar('Net is offline, Trying to reconnect ....')">
    Simple Snackbar
</button>

在Typescript组件中:

• 在构造函数中注入了MatSnackBar ，其对象在组件范围内可用。
• 创建了带有内容参数的showSnackbar方法，该方法用于打开snackbar逻辑。
• 调用Snackbar对象的Open() 方法

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

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

  showSnackbar(content) {
    this.snackBar.open(content);
  }
}

在点击按钮时，在浏览器中看到以下输出:

带有信息的行动按钮

这是一个在零食栏中显示包括信息的按钮的例子。

当点击小吃街的按钮时，它就从页面上消失了。

在HTML模板组件中:

• 创建的按钮添加了两个参数的点击处理方法
• 第一个参数是信息，第二个参数是动作按钮标签。

<button mat-raised-button color="primary" (click)="showSnackbarAction('Net is offline, Trying to reconnect ....','Done')">
  Snackbar action
</button>

在组件ts文件中，open()方法的第二个参数是一个显示在点心栏中的按钮。

 showSnackbarAction(content,action) {
  this.snackBar.open(content,action);
}

默认情况下，按钮会从页面上消失，Snackbar在显示的对象上有内置的事件，可以通过程序完全控制。

afterDismissed - 当snackbar从其页面上消失时，返回一个可观察的对象 - 在页面上显示后返回一个可观察的对象 - 以编程方式关闭它 - 这是处理按钮点击事件的可观察对象。afterOpened dismiss onAction

一个关于snackbar订阅事件的例子

let snack = this.snackBar.open(content, action);
    snack.afterDismissed().subscribe(() => {
      console.log("This will be shown after snackbar disappeared");
    });
    snack.onAction().subscribe(() => {
      console.log("This will be called when snackbar button clicked");
    });

浏览器中显示的输出

持续时间

持续时间是指零食栏在关闭前应该向用户显示多少时间。

默认情况下，snackbar是没有持续时间的，这意味着snackbar在页面刷新前不会被关闭。打开方法有第三个参数--持续时间，它配置了以毫秒计的时间。

<button mat-raised-button color="primary" (click)="showSnackbarDuration('Net is offline, Trying to reconnect in 5 seconds....','Done','5000')">
  Snackbar Duration
</button>

在组件代码中为snackbar对象的打开方法提供持续时间

showSnackbarDuration(content, action,duration) {
  this.snackBar.open(content, action,duration);

}

在5000毫秒或5秒后，小吃店从页面上消失。

栅栏的位置

以上所有的例子都显示在页面的底部。这个例子讲述了如何定位snackbar的水平和垂直。

我们可以使用verticalPosition 和horizontalPosition 配置open() 方法来定制位置。

showSnackbarTopPosition(content, action,duration) {
      this.snackBar.open(content, action, {
      duration: 2000,
      verticalPosition: 'top', // Allowed values are  'top' | 'bottom'
      horizontalPosition: 'center', // Allowed values are 'start' | 'center' | 'end' | 'left' | 'right'
    });
}

  Snackbar Top Position

panelClass自定义css样式--颜色、字体

我们仍然可以自定义小吃店的用户界面panelClass 配置参数

下面的例子在点击按钮时显示了带有自定义CSS样式的小吃条。

按钮是通过点击事件创建的，带有所有需要的内容

<button mat-raised-button color="primary" (click)="showSnackbarCssStyles('Net is offline, Trying to reconnect in 2 seconds....','Close','4000')">
  Snackbar CSS Styles</button>

在组件类型脚本中,

在open() 方法的第三个参数中提供了panelClass配置，panelClass包含css类选择器。

  showSnackbarCssStyles(content, action, duration) {
    let sb = this.snackBar.open(content, action, {
      duration: duration,
      panelClass: ["custom-style"]
    });
    sb.onAction().subscribe(() => {
      sb.dismiss();
    });
  }

在组件的css文件中，通过改变背景颜色和字体颜色声明了类选择器。

DOM中的Snackbar不是被调用的组件的子元素，所以由于这个原因，如果使用了类选择器，ng-deep。

component.css

::ng-deep .custom-style{
  background-color:brown;
  color:white;
}

另一个选择是在全局样式CSS文件中配置选择器，因为Snackbar可以访问主要的DOM元素。

style.css

.custom-style{
  background-color:brown;
  color:white;
}

浏览器中显示的输出

用openFromComponent方法传递数据

open方法有一个数据配置。

我们可以将数据从被调用的组件传递给显示的snackbar组件。

当使用反应式javascript库RXJS消耗REST API数据时，这将是非常有用的，并将数据显示在其中 创建了basic-snackbar.component

这里是basic-snackbar.component.html模板代码，用于显示从调用者组件传递过来的小吃店数据。提供了解雇按钮，当点击它时，dismiss() 方法被调用以关闭snackbar。

<div>
  <div>{{data}}</div>
  <div class="dismiss">
    <button mat-icon-button (click)="sbRef.dismiss()">
        <mat-icon>Dismiss</mat-icon>
      </button>
  </div>
</div>

下面是basic-snackbar.component.ts类型的代码

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

@Component({
  selector: "app-basic-snackbar",
  templateUrl: "./basic-snackbar.component.html",
  styleUrls: ["./basic-snackbar.component.css"]
})
export class BasicSnackbarComponent implements OnInit {
  constructor(
    public sbRef: MatSnackBarRef,
    @Inject(MAT_SNACK_BAR_DATA) public data: any
  ) {}
  ngOnInit() {}
}

下面是一个调用者组件的代码app.component.html

snackbar.openFromComponent()接受一个其他组件的组件，数据是传递给它的参数之一。

  data = "This is an example for passing data";
showBasicComponent(message: string, panelClass: string) {
    this.snackBar.openFromComponent(BasicSnackbarComponent, {
      data: this.data,
      duration: 10000
    });
  }

创建了一个按钮，点击该按钮就可以调用该方法。

<button mat-raised-button color="primary" (click)="showBasicComponent()">
  Snackbar passing data</button>