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

Question

В настоящее время у меня есть элемент snackbar с mat-progress-bar внутри.Я хотел бы закрыть элемент snackbar.Мой код в настоящее время выглядит следующим образом.импортировать {MAT_SNACK_BAR_DATA, MatSnackBar} из '@ angular / material';import {map} из 'rxjs / operator';

@Component({
  selector: 'app-upload-progress-snackbar',
  template: `
  Progress:
  <mat-progress-bar mode="determinate" [value]="progress | async" *ngIf="progress !== undefined"></mat-progress-bar>`,
  styles: [`mat-progress-bar { margin-top: 5px;}`],
})
export class UploadProgressComponent {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data) { }

  private started = false;
  public progress = this.data.uploadProgress.pipe(
    map(({ loaded, total }) => {
      if (loaded === undefined) {
        return !this.started ? 0 : 100;
      } else {
        this.started = true;
        return Math.round(loaded / (total || loaded) * 100);
      }
    },
  ));
}

Answer 1

Вы можете сделать следующее, чтобы достичь этого.

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

DIrenderer и 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