Question

正如标题所说，我正在使用https://material.angular.io/components/bottom-sheet/overview。当底部工作表打开并且用户单击其浏览器的后退按钮时，他将被打开远离打开底部工作表的页面。相反，我只想在浏览器上关闭底部表格＆＃39;。在Angular 5/6中实现这一目标的最佳方式是什么（如果有的话）？

Answer 1

我在这里使用角度6。

关闭底页：-

import { MatBottomSheet } from '@angular/material';
在构造函数中添加底页

构造函数（私有bottomSheet：MatBottomSheet） { } 3.

associateAthlete(participant: any) {
    this.bottomSheet._openedBottomSheetRef = 
           this.bottomSheet.open(AssociateAthleteComponent,
             { data: { member: participant, organizations: 
              this.ogranizationsWithoutZeroIndex }, disableClose: true });


          //after closing the bottom sheet afterDismissed function will be fired.

                this.bottomSheet._openedBottomSheetRef.afterDismissed().subscribe((data) 
              => {
                  alert('dismissed');
             })
}

就是这样。底部表格打开并关闭后，将触发 afterDismissed （）。

Answer 2

使用角度10，可以使用dismiss()的{{1}}方法。它记录在这里：https://material.angular.io/components/bottom-sheet/api

MatBottomSheetRef

Answer 3

我通过“＃”链接使用“假路线”解决了这个问题：

this.location.go("#");
let sheet = this.bottomSheet.open(MyBottomSheetComponent, {
  data: { someData: someData },
});
let subscription = this.location.subscribe(x => {
  if (x.url === 'this_is_the_URL_you_are_coming_from') {
    sheet.dismiss(true);
  } else {
    subscription.unsubscribe();
  }
});
sheet.afterDismissed().subscribe(x => {
  if (!x) {
    this.location.back();
  }
});

此“技术”也可用于角度材质的对话框组件。它对我来说看起来不太惯用，所以如果某人有更简单的方法，请发表回答！

Answer 4

还有另一种方法来处理后退键并消除后退时的BottomSheet，它已经在Angular 10，浏览器和Android设备上进行了测试，我认为它适用于所有Angular版本。

export class BottomSheetWidgetComponent implements OnInit {

  constructor(
    @Inject(MAT_BOTTOM_SHEET_DATA) private _data: any,
    private sheet: MatBottomSheetRef<BottomSheetWidgetComponent>

  ) {
    super(injector);
  }

  ngOnInit() {
    this.handleBackKey();
  }

  handleBackKey() {
    window.history.pushState(null, "Back", window.location.href);

    this.sheet.afterDismissed().subscribe((res) => {
      window.onpopstate = null;
      window.history.go(-1);
    });

    window.onpopstate = () => {
      this.sheet.dismiss();
      window.history.pushState(null, "Back", window.location.href);
    };
  }
 
}

使用MatBottomSheet时如何关闭浏览器后面的工作表

4 个答案: