如何從元素內部關閉/關閉 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 ..你必須在MatSnackBarRef上調用dismiss()

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

堆棧閃電戰

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

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 引用。 然后使用此引用關閉組件。

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>

Answer 4

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

Answer 5

也許這篇文章可以幫助https://hoshcoding.com/courses/1/angular-material-snackbar 。

在這里，您可以看到一個完整的示例，其中包含角材質小吃欄以及如何撤消操作。

如果您需要這里的代碼是示例：

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

問候