問題：對于開發(fā)Web應(yīng)用程序，使用Ionic提供的 ModalController 模態(tài)框控制器，打開一個模態(tài)框。在用戶點擊瀏覽器返回鍵 或 用戶在手機點擊返回鍵上觸發(fā)瀏覽器返回時，模態(tài)框并不會自動關(guān)閉，但卻觸發(fā)了路由返回，頁面返回到了上一頁。由于安全限制，無法阻止瀏覽器返回頁面。

解決方案：

定義一個抽象的模態(tài)框組件類：

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

  ngOnInit(): void {
    // 在當(dāng)前路由附加#modal，用來實現(xiàn)返回關(guān)閉模態(tài)框，而不返回上一頁
    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);
  }
}

讓所有自定義的模態(tài)框組件類都繼承該抽象類：

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

  ngOnInit() {
    // 調(diào)用父類的ngOnInit()方法
    super.ngOnInit();
    // ... ...
  }
}

原理：

1. 假設(shè)當(dāng)前頁面路由地址為：/page
2. 當(dāng)模態(tài)框組件掛載后，使用 this.router.navigate([], { fragment: 'modal' })，在當(dāng)前路由地址下附加一個 fragment，此時路由地址為 /page#modal（fragment 值可以隨便定義，不與當(dāng)前頁面的沖突就好）。
3. 監(jiān)聽路由導(dǎo)航結(jié)束事件 NavigationEnd，此時路由地址為 /page，頁面仍然是當(dāng)前頁面，借此機會，將模態(tài)框關(guān)閉。

路由地址 /page 到 /page#modal 再到 /page 的過程中，頁面不會發(fā)生跳轉(zhuǎn)，也不會觸發(fā)路由轉(zhuǎn)場動畫。