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

Question

我目前有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);
      }
    },
  ));
}

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

闪电战

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

Answer 2

Marshal 的解决方案很好，但需要付出很多努力。

以下解决方案更干净（无需传递小吃店参考或收听任何 dom 事件）

闪电战

小吃店组件：

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

Answer 3

实现此目的的一个好方法是利用自定义 Snack Bar 组件内的依赖注入来创建 Snack Bar 引用。然后使用此引用关闭组件。

自定义SnackBar.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>