Question

我对Material Design Snackbar配置存在问题。我要实现的目标是，每当收到有关某些功能的消息时就启动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'});
  }
}

在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）的帮助！

如何在Snackbar中设置消息

0 个答案: