如何创建一个SnackBar服务

MatSnackBar是一个angular指令，用于在移动设备上专门显示一个通知栏。
这些类型的UI组件一般会被多次使用。
所以为了避免代码的重复，可以简单地创建一个服务，在不同的组件中使用SnackBar。

步骤:

• 要创建一个服务，你必须使用以下命令。

ng g s snackBar

• 现在从@angular/core中导入MatSnackBar，并定义函数openSnackBar（你可以随时使用不同的名字）。

import { Injectable } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';
  
@Injectable({
  providedIn: 'root'
})
export class SnackBarService {
  
//create an instance of MatSnackBar
  
  constructor(private snackBar:MatSnackBar) { }
  
/* It takes three parameters 
    1.the message string 
    2.the action 
    3.the duration, alignment, etc. */
  
  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
       duration: 2000,
    });
  }
}

• 导入snackBarService并将其注入你想使用Snackbar的组件的构造函数中。这将创建一个名为snackBService的服务实例。
  现在在需要的地方调用openSnackBar函数，借助snackBService。

import { Component, OnInit } from '@angular/core';
import {SnackBarService} from '../snack.service';
  
  
@Component({
  selector: 'app-profile',
  templateUrl: './snackBar.html',
  styleUrls: ['./snackBar.css']
})
export class SnackBar {
  
  // create an instance of SnackBarService 
  
  constructor(private snackBService:SnackBarService) { }
  
  //defining method for display of SnackBar
  
  trigger(message:string, action:string)
  {
   this.snackBService.openSnackBar(message, action);
  }
  
}

• 通过重复这些步骤，我们可以在任何组件内使用snackBar。
  示例:

<button  (click)="trigger('This is a ', 'SnackBar')">
    SnackBarButton
</button>

输出: