Question

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

谢谢！

Answer 1

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

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

您可以看到Cordova将新事件添加到“文档”中。 http://www.regexformat.com/scrn8/MegConv.jpg

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

对我来说，最好的方法是更改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();

  };
}

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

@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

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

Answer 2

我尝试了这个，它似乎起作用了

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

Answer 3

尝试

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

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

关闭角度模态并保持在同一页面上的后退按钮单击

3 个答案: