关闭角度模态，并在单击后退按钮的同一页面上保留 [英] Close angular modal and remain on same page on back button click

问题描述

我正在使用Angular 6开发一个使用角度模态的Web应用程序.在我的手机(Android)上，我注意到打开模式时单击手机的后退按钮不仅会关闭打开的模式，还会导航回到上一页.是否可以仅关闭打开的对话框并保留在主页上?我认为这将是手机上的预期行为.

I am developing a web application using Angular 6 that uses angular modal. On my phone (Android), I noticed that clicking the phone's back button when a modal is open doesn't only dismiss the open modal, but also navigates back to the previous page. Is it possible to close the open dialog only instead and remain on the main page? I think this would be the expected behavior on a mobile phone.

谢谢！

推荐答案

@Simo，有些复杂.在Cordova中，您可以使用事件"deviceready"来控制事件的暂停，恢复和后退按钮.

@Simo, is some complex. In Cordova, you have an event "deviceready" that you can use to control the events pause, resume and backbutton.

阅读官方文档，将Web应用程序转换为Movil应用程序.

Read the official docs to convert a web application to a movil app.

您可以看到Cordova将新事件添加到文档"中. https://cordova.apache.org/docs/en/Latest/cordova/events/events.html

You can see that Cordova add new events to "document". https://cordova.apache.org/docs/en/latest/cordova/events/events.html

如何将其添加到我们的Angular应用程序中?

Well How adding this to our Angular application?

对我来说，最好的方法是更改​​AppComponent(主要组件)以添加新事件，并使用服务使所有过程透明化.

For me, the best way is change the AppComponent (the main component) to add the new events and use a service to make all the process transparent.

在AppComponent(主要组件)的AfterViewInit中，我们将添加document.addEventListener以进行就绪，暂停，恢复和后退按钮

In the AfterViewInit of the AppComponent (the main component) we are going to add the document.addEventListener for ready, pause, resume and backbutton

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

  };
}

我们的服务非常简单.只是一个私人主题和一个Observable，可以订阅我们的组件.

Our service is very simple. just a private subject and a Observable that can be subscribe for our components.

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

最后，任何组件都可以订阅ngOnInit中的cordovaEvent

Finally, any component can subscribe to cordovaEvent in ngOnInit

  ngOnInit() {
    this.cordovaEventService.cordovaEvent.subscribe((evento: CordovaEvent) => {
      if (evento == CordovaEvent.BackButton) {
        this.ngZone.run(()=>{
          ....make something...
        })
      }
    });
  }

这篇关于关闭角度模态，并在单击后退按钮的同一页面上保留的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！