Snackbar funktioniert nicht mit Modal Table Angular Material

Question

Ich habe eine Löschfunktion implementiert und muss nach erfolgreichem Abschluss eine Snackbar mit der vom Backend empfangenen Nachricht anzeigen. Ich kann die richtige Antwort erhalten, aber die Snackbar ist nicht zugänglich. Ich denke, der Bereich ist anders, da es sich um eine Mat-Dialog-Tabelle handelt, von der ich einen Benutzer lösche. TS-Code:

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

Commonservice Code:

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

Wie kann ich die Snackbar mit der Nachricht anzeigen? Ich erhalte die folgende Fehlermeldung: ERROR TypeError: Die Eigenschaft 'showSnackBar' von undefined kann nicht gelesen werden. Ich habe festgestellt, dass ich keine Funktion aufrufen kann, Service von innen afterClosed. Irgendeine Problemumgehung?

Answer 1

Commonservice Code:

Versuche dies..

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