Snackbar not working on Modal Table Angular Material

问题

I have implemented a functionality of deletion and on successful completion I have to display a snackbar with the message received from backend. I am able to get the correct response but the snackbar is not accessible. I think the scope is different as it is mat-dialog table from where I am deleting a user. 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   
    });}}

How can I display the snackbar with the message? I get the following error: ERROR TypeError: Cannot read property 'showSnackBar' of undefined. I have noticed I am not able to call any function, service from inside afterClosed. Any workaround?

回答1:

Commonservice Code:

Try this..

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

来源：https://stackoverflow.com/questions/64817555/snackbar-not-working-on-modal-table-angular-material