如何创建SnackBar服务？

MatSnackBar是一个角度指令，用于专门在移动设备上显示通知栏。
这些类型的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);
  }
  
}

通过重复这些步骤，我们可以在任何组件内使用快餐栏。
例子：

    SnackBarButton

输出：