Как настроить сообщение в Snackbar - PullRequest
Новая
       11

Как настроить сообщение в Snackbar

0 голосов
/ 22 ноября 2018

У меня проблема с конфигурацией снэк-бара Material Design.То, чего я пытаюсь добиться, - это запускать Snackbar всякий раз, когда появляется сообщение о какой-то функциональности, например: когда я удаляю запись, запускается сообщение и сообщаю пользователю, что все в порядке.Он работает как компонент и отображается как предупреждение при начальной загрузке, но я хочу, чтобы он был в снэк-баре.

Часть Category компонента: 

delete(category: Category): void {
  this.categories = this.categories.filter(c => c !== category);
  this.categoryService.deleteCategory(category).subscribe();
}

Часть службы Category: 

      /** DELETE: delete the Category from the server */
  deleteCategory (category: Category | number): Observable<Category> {
    const CategoryId = typeof category === 'number' ? category : 
      category.id;
    const urlCategoryId = `${this.urlCategory}/${CategoryId}`;

    return this.http.delete<Category>(urlCategoryId, httpOptions).pipe(
      tap(_ => this.log(`Category has been deleted`)),
      catchError(this.handleError<Category>('deleteCategory'))
    );
  }


/**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // // TODO: better job of transforming error for user consumption
      // this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

  private log(message: string) {
    this.messageService.add(`${message}`);
  }

Message компонент: 

    import { Component, OnInit } from '@angular/core';
    import {MessageService} from '../../services/message
           /message.service';

    @Component({
      selector: 'app-messages',
      templateUrl: './messages.component.html',
      styleUrls: ['./messages.component.scss']
    })
    export class MessagesComponent implements OnInit {

      constructor(public messageService: MessageService) { }

      ngOnInit(): void {
      }
    }

Message сервис: 

    import {Injectable} from '@angular/core';
    import {MatSnackBar} from '@angular/material';

    @Injectable({
      providedIn: 'root'
    })

export class MessageService {
  messages: string[] = [];

  constructor(private snackBar: MatSnackBar) { }

  clear() {
    this.messages = [];
  }

  add(message: string) {
    this.snackBar.open(message, 'Close', {
      duration: 5000, horizontalPosition: 'right', verticalPosition: 
      'bottom', panelClass: 'snackbar-style'});
  }
}

in assets/custom.scss

    .snackbar-style {
      background-color: 'color of your choice' !important;
      color: 'color of your choice' !important;
    }

Message html: 

 <div *ngIf="messageService.messages.length" class="alert alert-info 
    alert-with-icon" data-notify="container">
    <button type="button" aria-hidden="true" class="close" 
            (click)="messageService.clear()">
        <i class="now-ui-icons ui-1_simple-remove"></i>
    </button>
    <span data-notify="icon" class="now-ui-icons ui-1_bell-53"></span>
    <span data-notify="message">{{ messageService.messages }}</span>
</div>

Полное решение.

Спасибо всем (особенно JB Nizet) за помощь!

...