Tengo un snackbar que funciona, pero solo está en cada componente, quiero agregarlo a mi servicio, así que solo lo llamaré. Esta es mi muestra en mi component.ts
import { MdSnackBar, MdSnackBarRef } from '@angular/material'; ... export class EmployeeListComponent implements OnInit { public toastRef: MdSnackBarRef<any>; constructor(private _activatedRoute:ActivatedRoute,private router: Router, private http:PMISHttpService, private toast: MdSnackBar) { ngOnInit() { this.notify('test'); } ... notify (text: string) { this.toastRef = this.toast.open(text, null); setTimeout(() => { this.toastRef.dismiss(); }, 5000); } ... }Si desea que un SnackBar funcione en toda su aplicación, debe colocarlo en su componente de aplicación y comunicarse con él con un servicio.
notificación.servicio.ts:
public notification$: Subject<string> = new Subject();aplicación.componente.ts:
constructor( private notificationService: NotificationService, private snackBar: MatSnackBar ) { this.notificationService.notification$.subscribe(message => { this.snackBar.open(message); }); }cualquier.componente.ts:
this.notificationService.notification$.next('this is a notification');Para tenerlo en todas partes, cree un servicio para él. También debe usar la configuración de la barra de bocadillos para establecer la duración y hacer que la barra de bocadillos sea pública:
import {Injectable, NgZone} from '@angular/core'; import {MatSnackBar} from '@angular/material'; @Injectable() export class CustomSnackbarService { constructor( public snackBar: MatSnackBar, private zone: NgZone ) {} public open(message, action = 'success', duration = 50000) { this.zone.run(() => { this.snackBar.open(message, action, { duration }); }); } } También debe ejecutarse en ngZone : https://github.com/angular/material2/issues/9875
Luego en el componente:
customSnackbarService.open('hello')
Puedes hacer esto fácilmente. Encuentre a continuación el ejemplo de la muestra que utilicé en uno de mis proyectos y funciona perfectamente bien
import { Injectable } from '@angular/core'; import { MatSnackBar, MatSnackBarConfig, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, MatSnackBarRef } from '@angular/material'; @Injectable() export class SnackBarService { snackBarConfig: MatSnackBarConfig; snackBarRef: MatSnackBarRef<any>; horizontalPosition: MatSnackBarHorizontalPosition = 'center'; verticalPosition: MatSnackBarVerticalPosition = 'top'; snackBarAutoHide = '1500'; constructor(private snackBar: MatSnackBar) { } openSnackBar(message) { this.snackBarConfig = new MatSnackBarConfig(); this.snackBarConfig.horizontalPosition = this.horizontalPosition; this.snackBarConfig.verticalPosition = this.verticalPosition; this.snackBarConfig.duration = parseInt(this.snackBarAutoHide, 0); this.snackBarConfig.panelClass = 'custom-snackbar'; this.snackBarRef = this.snackBar.open(message, '', this.snackBarConfig); } }Ahora, solo necesita inyectar este servicio en su componente o donde quiera usarlo y llamar al método openSnackBar() con el mensaje que desea mostrar.
¡¡Espero que esto ayude!!