Как закрыть / закрыть элемент Angular Snackbar изнутри элемента

Для этого вы можете сделать следующее.

Этот snack-bar похож на mat-dialog .. вы должны вызвать dismiss() на MatSnackBarRef

DI renderer и MatSnackBarRef ... вам не нужен рендерер, если вы собираетесь уволить каким-то другим способом, это просто для демонстрационных целей.

 @Inject(MAT_SNACK_BAR_DATA) public data,
    private _snackRef: MatSnackBarRef<UploadProgressComponent>,
    private ren:Renderer2

Если вы хотите убрать при завершении индикатора выполнения, вы можете вызвать dismiss() в этой логике. Я закрою по щелчку.

Создайте прослушиватель событий щелчка в вашем constructor ...

{ 
  setTimeout(()=>{
    let snackEl = document.getElementsByClassName('mat-snack-bar-container').item(0);
    ren.listen(snackEl, 'click', ()=>this.dismiss())
  })

создайте свой dismiss()

  dismiss(){
    this._snackRef.dismiss();
  }

Stackblitz

https://stackblitz.com/edit/angular-mdyher?embed=1&file=app/snack-bar-component-example.ts

Решение Маршала хорошее, но требует больших усилий.

Следующее решение более чистое (нет необходимости передавать ссылку на закусочную или слушать какое-либо событие dom)

Stackblitz

Компонент Snackbar:

@Component({
  selector: 'app-upload-progress-snackbar',
  template: `
  Hello :)
  <button mat-button color = "primary" (click) = "dismiss()">Dismiss</button>  
  `,

})
export class UploadProgressComponent {
  constructor(
    @Inject(MAT_SNACK_BAR_DATA) public data) {}

  dismiss(){
    this.data.preClose(); //access preClose function when you want to close snackbar
  }
}

Код открытия закусочной:

openSnackBar() {
    const snackBar = this.snackBar.openFromComponent(UploadProgressComponent, {
      data: {preClose: () => {snackBar.dismiss()} } //pass a function to be called when you want to close the snackbar
    });
  }

Хороший способ сделать это - использовать внедрение зависимостей внутри настраиваемого компонента Snack Bar для создания ссылки на закусочную. Затем закройте компонент, используя эту ссылку.

CustomSnackBar.ts

constructor(
    private snackBarRef: MatSnackBarRef<GeneralSnackbarComponent>,
    @Inject(MAT_SNACK_BAR_DATA) public data: any
) { }

public dismiss(): void {
    this.snackBarRef.dismiss();
    event.preventDefault();
}

CustomSnackBar.html

<button id = "cancelBtn" mat-button (click) = "dismiss()">
    Cancel
</button>

Посмотрите этот Потрясающая демонстрация на Stackblitz.

export class PizzaPartyComponent {
  constructor(public snackBarRef: MatSnackBarRef<PizzaPartyComponent>,
  @Inject(MAT_SNACK_BAR_DATA) public data: any){}
}

Используйте snackBarRef.dismiss(), чтобы закрыть его.

Если вы столкнулись с мерцанием при отображении закусочной, запустите его в Ngzone.

constructor(private _snackBar: MatSnackBar, private zone: NgZone) {}

openSnackBar() {
  this.zone.run(()=>{
    this._snackBar.openFromComponent(PizzaPartyComponent, {
      data: this.message,
      duration: this.durationInSeconds * 1000,
    });  
  });
}

Может, эта статья могла бы помочь https://hoshcoding.com/courses/1/angular-material-snackbar.

Здесь вы можете увидеть полный пример закусочной из материала angular и то, как отменить действие.

Если вам нужен код, вот пример:

openSnackbar(message, action) {
    let snackBarRef = this.snackBar.open(message, action);
    snackBarRef.afterDismissed().subscribe(() => {
      console.info("The snackbar is dismissed");
    });
    snackBarRef.onAction().subscribe(() => {
      console.info("The snackbar action was triggered!");
    })
  }

С Уважением