Snackbar não funciona em Material Angular de Mesa Modal

Question

Implementei uma funcionalidade de exclusão e, após a conclusão com êxito, tenho que exibir uma barra de ferramentas com a mensagem recebida do backend. Consigo obter a resposta correta, mas o snackbar não está acessível. Acho que o escopo é diferente, pois é uma mesa de diálogo de esteira de onde estou excluindo um usuário. Código TS:

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent implements OnInit {
constructor(
      public commonService :CommonService
    } {}
// I am opening dialog from this parent component
 openDialog(u, c){
     this.response = JSON.parse(JSON.parse(u.Data));
     for(var i =0;i<Object.keys(this.response).length;i++){
      this.final.push(this.response[i]);
    }
     const dialogRef = this.dialog.open(DialogExample, {
         data: {arrayDialog: this.finalUsers, c}
       });
     dialogRef.afterClosed().subscribe(result => {
       this.finalUsers = [];
     });
   }


//this is where the mat dialog is
 @Component({
    selector: 'dialog-example',
    templateUrl: 'dialog.html',
  })
  export class DialogExample {
    constructor(
      public dialogRef: MatDialogRef<DialogExample>,
      public dialog:MatDialog,
      public commonService :CommonService,
    } {}
//some function
              //if deletion is successful
              dialogRef.afterClosed().subscribe((confirmed: boolean) => {
              if (confirmed) { //if deletion is confirmed
              this.deleteMessage = this.details.msg;
              this.commonService.showSnackBar(this.deleteMessage);           

Código de serviço comum:

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { MatSnackBar } from '@angular/material';

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

  public spinnerSubject: Subject<boolean> = new Subject<boolean>();

  constructor(private snackBar: MatSnackBar) {}

  public showSnackBar(message){
    this.snackBar.open(message,'',{
      duration: 5000   
    });}}

Como posso exibir o snackbar com a mensagem? Recebo o seguinte erro: ERROR TypeError: Não é possível ler a propriedade 'showSnackBar' de indefinido. Percebi que não consigo chamar nenhuma função, serviço de dentro depois de Fechado. Alguma solução alternativa?

Answer 1

Código de serviço comum:

Experimente isso ..

import { Injectable } from '@angular/core';
    import { Subject, Observable } from 'rxjs';
    import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
    
    @Injectable({
      providedIn: 'root'
    })
    export class CommonService {
    
      public spinnerSubject: Subject<boolean> = new Subject<boolean>();
    
      constructor(private snackBar: MatSnackBar) {}
    
      public showSnackBar(message){
        let config = new MatSnackBarConfig();
        config.duration = 5000;
        this.snackBar.open(message,undefined,config);
      }
    }