Question

我目前有一个snackbar元素，里面有一个mat-progress-bar。我想关闭snackbar元素。我的代码当前看起来像这样。从'@ angular / material'导入{MAT_SNACK_BAR_DATA，MatSnackBar}; 从'rxjs / operators'导入{map};

@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

元帅的解决方案很好，但是需要很多努力。

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

Stackblitz

快餐栏组件：

@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 2

执行此操作的一个好方法是利用自定义小吃栏组件中的依赖注入来创建小吃店引用。然后使用该引用关闭组件。

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 3

您可以执行以下操作来实现这一目标。

此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

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!");
    })
  }

问候

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

5 个答案: