Angular/Ionic 实现浏览器返回时自动关闭模态框

问题：对于开发Web应用程序，使用Ionic提供的 ModalController 模态框控制器，打开一个模态框。在用户点击浏览器返回键 或 用户在手机点击返回键上触发浏览器返回时，模态框并不会自动关闭，但却触发了路由返回，页面返回到了上一页。由于安全限制，无法阻止浏览器返回页面。

解决方案：

定义一个抽象的模态框组件类：

@Directive()
export abstract class ModalComponent implements OnInit, OnDestroy {
  constructor(
    protected router: Router,
    protected modalCtrl: ModalController
  ) { }

  ngOnInit(): void {
    // 在当前路由附加#modal，用来实现返回关闭模态框，而不返回上一页
    this.router.navigate([], { fragment: 'modal' });
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      first()
    ).subscribe(() => this.dismiss());
  }

  ngOnDestroy(): void {
    this.router.navigate([]);
  }

  dismiss(data?: any, role?: string, id?: string): any {
    this.modalCtrl.dismiss(data, role, id);
  }
}

让所有自定义的模态框组件类都继承该抽象类：

@Component(...)
export class CustomModalComponent extends ModalComponent {
  constructor(
    protected router: Router,
    protected modalCtrl: ModalController
  ) {
    super(router, modalCtrl);
  }

  ngOnInit() {
    // 调用父类的ngOnInit()方法
    super.ngOnInit();
    // ... ...
  }
}

原理：

1. 假设当前页面路由地址为：/page
2. 当模态框组件挂载后，使用 this.router.navigate([], { fragment: 'modal' })，在当前路由地址下附加一个 fragment，此时路由地址为 /page#modal（fragment 值可以随便定义，不与当前页面的冲突就好）。
3. 监听路由导航结束事件 NavigationEnd，此时路由地址为 /page，页面仍然是当前页面，借此机会，将模态框关闭。

路由地址 /page 到 /page#modal 再到 /page 的过程中，页面不会发生跳转，也不会触发路由转场动画。