Angular 关闭角度模式，并在“后退”按钮单击时保持在同一页面上

我正在使用Angular 6开发一个web应用程序，它使用Angular模式。在我的手机（Android）上，我注意到当模式打开时单击手机的后退按钮不仅会关闭打开模式，还会导航回上一页。是否可以只关闭“打开”对话框并保留在主页上？我想这是手机上的预期行为

---

谢谢

@Simo，有点复杂。在Cordova中，您有一个事件“deviceready”，可用于控制事件暂停、恢复和后退按钮

阅读官方文档，将web应用程序转换为movil应用程序

您可以看到Cordova在“文档”中添加了新事件

那么如何将其添加到我们的角度应用程序中呢

对我来说，最好的方法是更改AppComponent（主组件）以添加新事件，并使用服务使所有流程透明

在AppComponent（主组件）的AfterViewInit中，我们将添加document.addEventListener，用于就绪、暂停、恢复和后退按钮

//we use a enum for the different events.
export enum CordovaEvent {BackButton,Resume,Pause}

export class AppComponent implements AfterViewInit{

  constructor(private cordovaEventService:CordovaEventService) { }

  ngAfterViewInit() {
    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
  }
  onDeviceReady() {
    // Control pause, resume and backbutton
    document.addEventListener('pause', this.onPause.bind(this), false);
    document.addEventListener('resume', this.onResume.bind(this), false);
    document.addEventListener("backbutton", this.onBackKeyDown.bind(this), false);
    //a variable that I can use to know if is really a movil application 
    this.cordovaEventService.isCordoba=true;

  };

  onPause() {
    //the only thing that I make is execute a function in a service
    this.cordovaEventService.sendEvent(CordovaEvent.Pause);
  };

  onResume() {
    this.cordovaEventService.sendEvent(CordovaEvent.Resume);
  };

  onBackKeyDown(e) {
    this.cordovaEventService.sendEvent(CordovaEvent.BackButton);
    e.preventDefault();
    e.stopPropagation();

  };
}

我们的服务很简单。只是一个私人主题和一个可以订阅我们组件的可观察对象

@Injectable()

export class CordovaEventService {

    private listeningSource:Subject<CordovaEvent>=new Subject<CordovaEvent>();
    cordovaEvent:Observable<CordovaEvent>=this.listeningSource.asObservable();

    isCordoba:boolean=false;

    constructor() {
    }
    sendEvent(evento:CordovaEvent)
    {
        this.listeningSource.next(evento);
    }
}

---

我试过这个，它似乎有效

// push history state when a dialog is opened
dialogRef.afterOpened.subscribe((ref: MatDialogRef<any, any>) => {
  window.history.pushState(ref.id, '');
  // pop from history if dialog has not been closed with back button, and gurrent state is still ref.id
  ref.afterClosed().subscribe(() => {
    if (history.state === ref.id) {
      window.history.go(-1);
    }
  });
});

//打开对话框时推送历史记录状态
dialogRef.AfterOpen.subscribe（（ref:MatDialogRef）=>{
window.history.pushState（ref.id.）；
//若对话框并没有用“后退”按钮关闭，并且gurrent状态仍然是ref.id，则从历史中弹出
参考afterClosed（）.订阅（（）=>{
if（history.state===ref.id）{
window.history.go（-1）；
}
});
});

试试这个

import { Router, Event } from '@angular/router';  

constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      $(".modal").modal('hide');
    });
  }

---

您正在使用哪个组件库？您提到“角度模式”，但这是引导、材质等的一部分吗？我使用的是材质模式。JS上的“后退按钮”没有事件，后退按钮总是会导航回上一页。@Danny908，我支持Simo使用Cordova或其他框架来制作应用程序。Cordova在movil应用程序中转换web应用程序，允许控制摄像头、GPS、后退按钮等，请参阅Thank@Eliseo。我实际上想问的是，当我在Chrome之类的浏览器上关闭对话框时，是否能够阻止导航。我没有使用Cordova。因为我所问的行为似乎无法实现，我将接受@Eliseo的回答，以防有人想使用Cordova。@Simo？

import { Router, Event } from '@angular/router';  

constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      $(".modal").modal('hide');
    });
  }