html - Ionic 4 タブベースのアプリで複数のサイドメニュー

私はそのコマンドでタブベースのアプリを作成しました。

ionic start myApp tabs

アイデアは、各タブページに異なるサイドメニューを追加し、マスターディテールナビゲーションを試みることで、サイドメニューをマスター要素リストとして使用し、タブページで詳細なコンテンツを表示することです。

app.component.html ファイルは次のようになります:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

コードのような tab1.page.html:

<ion-menu contentId="aside1" side="start">
    <ion-content>
        <ion-list>
            <ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-router-outlet id="aside1" main></ion-router-outlet>

tab2.page.html のコード:

<ion-menu contentId="aside2" side="start">
    <ion-content>
        <ion-list>
            <ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-router-outlet id="aside2" main></ion-router-outlet>

両方のメニューaside1とaside2は、スワイプすると動作し、最初にタブを表示したときに個々の文字列の配列要素を表示します。問題は、以前のタブに戻ると、再びaside1サイドメニューを表示する代わりに、これが動作しなくなり、swipeジェスチャーが実際に行うのは他のタブのサイドメニューを表示することです。

これを動作させるために、tab1.page.ts と tab2.page.ts に特定のコードが必要かどうかは分かりません。

回答 #1

問題は、各サイドメニューにmenuIdを指定していなかったことです。例えば:

<ion-menu contentId="main-content" menuId="main"> ... </ion-menu>

<ion-menu menuId="bar-menu"> ... </ion-menu>

誰かが各ページごとに異なるメニューを作るのが面白いと思うかもしれないので、私はその質問を削除しません