时间戳

首页 > 解决方案 > 如何从内部元素关闭/关闭 Angular Snackbar 元素

angular - 如何从内部元素关闭/关闭 Angular Snackbar 元素

问题描述

我目前有一个里面有一个snackbar元素。mat-progress-bar我想关闭snackbar元素。我的代码目前看起来像这样。

import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material';
import { map } from 'rxjs/operators';

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

标签： angularangular-material

解决方案

您可以执行以下操作来实现此目的。

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

堆栈闪电战

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

推荐阅读