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

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

处理方案：

定义一个笼统的模态框组件类：

@Directive()export abstract class ModalComponent implements OnInit {  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());  }  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 的过程中，页面不会发生跳转，也不会触发路由转场动画。