问题：对于开发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();
// ... ...
}
}
原理：
- 假设当前页面路由地址为：
/page - 当模态框组件挂载后，使用
this.router.navigate([], { fragment: 'modal' })，在当前路由地址下附加一个fragment，此时路由地址为/page#modal（fragment 值可以随便定义，不与当前页面的冲突就好）。 - 监听路由导航结束事件
NavigationEnd，此时路由地址为/page，页面仍然是当前页面，借此机会，将模态框关闭。
路由地址
/page到/page#modal再到/page的过程中，页面不会发生跳转，也不会触发路由转场动画。
