Ionic Modalで開いてる画面から別のページには遷移できない（かもしれない）

#はじめに
Ionicの[modal](https://ionicframework.com/docs/api/modal)で開いた画面から、**別のページに遷移したいと思ったことあります？**

色々試したのですが、**結論から言えばできませんでした**・・・:dizzy_face:

#routerで遷移できなかった。。。
`/my-page`でログインページのモーダルを開く→ボタンを押したら`/home`に戻る

と言うのを実現したかったが、無理でした。。。

##my-page
```html:my-page.html
<ion-header>
  <ion-toolbar color="primary">
      <ion-buttons slot="start">
          <ion-back-button defaultHref="/home"></ion-back-button>
        </ion-buttons>
    <ion-title>マイページ</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
   <ion-button seize="large" expand="block" fill="outline" (click)="openModal()">
            <ion-icon name="log-in-outline" size="large"></ion-icon>
            ログイン
          </ion-button>
</ion-content>
```

```typescript:my-page.ts
import { LoginComponent } from './login/login.component';
import { ModalController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.page.html',
  styleUrls: ['./my-page.page.scss'],
})
export class MyPagePage implements OnInit {

constructor(
    private modalCtrl: ModalController
  ) {}

async openModal() {
    const modal = await this.modalCtrl.create({
      component: LoginComponent,
    });

    return await modal.present();
  }

}
```

##modalで開く画面

```html:login.component.html
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>ログイン</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="onCancel()">
        <ion-icon name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <ion-button seize="large" expand="block" fill="outline" (click)="gotoHome()">
            homeに戻る
          </ion-button>

  </ion-content>
```

```typescript:login.component.ts
import { ModalController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
  constructor(
    private modalCtrl: ModalController,
    private router: Router,
  ) {}

  ngOnInit() {}

  onCancel() {
    this.modalCtrl.dismiss({
      dismissed: true,
    });
  }

 // これではうまくいかない・・・
  gotoHome() {
    this.router.navigateByUrl('/home');
  }
}
```

#原因
modalはページの上に画面（component）を重ねて表示しているからだと思われる。


```typescript
this.router.navigateByUrl('/home');
```
実際にurlは変わっているが、見た目ではその遷移先（`/home`）の画面の上に、重なるようにmodalが開いてるため、何も変化がないように思われる！

#追記
[Ionic4での画面遷移の種類と使い分け](https://qiita.com/y_hokkey/items/6c0c72f8858b479d8105)
:point_up:こちらより、耳寄りな情報をゲット！

>一方ion-modalでコンポーネントを表示する場合は、既存の画面表示とURLを維持したまま、単純にその上へ新しいコンポーネントを重ねて表示します。表示の制御もルーティングとは独立しており、またion-modal単体で複数のコンポーネントを切り替えて表示する機能はありません。

また

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ModalはURLを持たないので、URLで遷移することはできません。もしModal上でPush遷移などを行いたければ、<a href="https://t.co/EJJpMpTULL">https://t.co/EJJpMpTULL</a><br><br>が参考になるかと思いますー！</p>&mdash; Masahiko Sakakibara (@rdlabo) <a href="https://twitter.com/rdlabo/status/1284322959604109312?ref_src=twsrc%5Etfw">July 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これion-navつかえばできるよ。確か。<br>sworkitあたりがその実装してる <a href="https://t.co/jlt0OJehp2">https://t.co/jlt0OJehp2</a></p>&mdash; scrp (@scrpgil) <a href="https://twitter.com/scrpgil/status/1284332947827384326?ref_src=twsrc%5Etfw">July 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


こう言った情報も頂いたので、[ion-nav](https://ionicframework.com/docs/api/nav)を使えばmodalで開いた画面から別のページに遷移することができそうです！