web-dev-qa-db-fra.com

Comment utiliser SnackBar on service à utiliser dans chaque composant de Angular 2

J'ai un snack qui fonctionne, mais il ne figure que sur chaque composant. Je souhaite l'ajouter à mon service afin de l'appeler. Ceci est mon exemple sur mon 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);
  }
  ...
}
angularangular-material2snackbar
9
Storm Spirit

Si vous souhaitez qu'un SnackBar fonctionne sur l'ensemble de votre application, vous devez l'insérer dans votre app.component et communiquer avec lui via un service.

notification.service.ts:

public subj_notification: Subject<string> = new Subject();

app.component.ts:

constructor(
  private notificationService: NotificationService,
) {
  this.notificationService.subj_notification.subscribe(message => {
    snackBar.open(message);
  });
}

any.component.ts:

this.notificationService.subj_notification.next('this is a notification');
13
Ploppy

Pour l'avoir partout, créez un service pour cela. Vous devez également utiliser la configuration snackbar pour définir la durée et rendre public snackbar: 

@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 });
      }
    }

}

En outre, il doit être exécuté dans ngZone: https://github.com/angular/material2/issues/9875

Puis dans le composant:

customSnackbarService.open('hello')

3
mchl18

Vous pouvez facilement le faire. Veuillez trouver ci-dessous l'exemple de l'échantillon que j'ai utilisé dans l'un de mes projets et qui fonctionne parfaitement

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 = 'glam-snackbar';
    this.snackBarRef = this.snackBar.open(message, '', this.snackBarConfig);
}

}

Désormais, il vous suffit d'injecter ce service dans votre composant ou à tout endroit où vous souhaitez l'utiliser et d'appeler la méthode openSnackBar () avec le message que vous souhaitez afficher.

J'espère que cela t'aides!!

1
Harmandeep Singh Kalsi