使用来自不同组件的数据共享服务定制angular 7多消息Snackbar

创建一个可重用的Snackbar（angular 7），它可以显示使用数据共享服务从不同组件接收到的不同消息。Snackbar仅在重新加载时显示，而不是在我单击按钮并同时显示所有消息时显示

app\snackbar\snackbar.component.html

   <div class="show-snackbar">
    <div *ngIf="showSnackbar"
         [@fadeInFadeOutAnimation]>
        <div *ngIf="add" class="snackbar">
            <p>{{ MessageAdded }}</p>
            <button class="btn-text" type="button"
                    (click)="onClose($event)">
                Close
            </button>
        </div>
        <div *ngIf="remove" class="snackbar">
            <p>{{ MessageRemoved }}</p>
            <button class="btn-text" type="button"
                    (click)="onClose($event)">
                Close
            </button>
        </div>
    </div>

<div class="header">
    <div class="btn" 
       [ngClass]="{
          'active': addNew,
          'inactive': !addNew
       }"
       (click)="toggleAddRemove($event)">
       <i class="icon-like"></i>
    </div>
</div>

app\services\snackbar.service.ts

import { Component, OnInit } from '@angular/core';
import { fadeInFadeOutAnimation } from '../shared/animations';
import { SnackbarService } from 'app/services/snackbar.service';

const MSG_TIMEOUT = 5000;

@Component({
    selector: 'snackbar-ce',
    templateUrl: './snackbar.component.html',
    styleUrls: ['./snackbar.component.scss'],
    animations: [
        fadeInFadeOutAnimation,
    ],
})

export class SnackbarComponent implements OnInit {
    showSnackbar;
    add;
    remove;

    constructor(private snackbarService: SnackbarService) { }

    ngOnInit() {

        this.showSnackbar = this.snackbarService.showSnackbar;
        this.add = this.snackbarService.add;
        this.remove = this.snackbarService.remove;
        setTimeout(() => {
            this.showSnackbar = false;
        }, MSG_TIMEOUT);
    }

    ngAfterViewInit() { }

    onClose(e: Event) {
        this.showSnackbar = false;
    }
}

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class SnackbarService {

    private showSnackbarSource = new Subject<any>();
    public showSnackbar = this.showSnackbarSource.asObservable();

    private addSource = new Subject<any>();
    public add = this.addSource.asObservable();

    private removeSource = new Subject<any>();
    public remove = this.removeSource.asObservable();

    constructor() { }

    changeShowSnackbar(showSnackbar: boolean) {
        this.showSnackbarSource.next(showSnackbar);
    }

    showAddMessage(added: boolean) {
        this.addSource.next(added);
    }

    showRemoveMessage(removed: boolean) {
        this.removeSource.next(removed);
    }
}

import { Component, OnInit, Inject } from '@angular/core';
import { SnackbarService } from '../../services/snackbar.service';

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

  addNew = false;

  showSnackbar = false;
  add = false;
  remove = false;

  constructor(private snackbarService: SnackbarService) { }

  ngOnInit() { 
   this.snackbarService.showSnackbar.subscribe(result => { this.showSnackbar = result; });
   this.snackbarService.add.subscribe(result => { this.add = result; });
   this.snackbarService.remove.subscribe(result => { this.remove = result; });
  }  

  toggleAddRemoveFavorites(e: Event) {

     this.addNew = !this.addNew;
     this.snackbarService.changeShowSnackbar(true);

        if (this.addNew) {
            this.snackbarService.showAddMessage(true);
            this.snackbarService.showRemoveMessage(false);
            console.log("isAdded");
        } else {
            this.snackbarService.showAddMessage(false);
            this.snackbarService.showRemoveMessage(true);
            console.log("isRemoved");
        }
        this.snackbarService.changeShowSnackbar(false);
    }
}