0

アプリにタブ ビューがあるという要件があります。4 番目のタブにはポップオーバーがあり、そのポップオーバーにはタブとして機能する 3 つのメニューがさらに含まれており、他の 3 つのタブのように開く必要があります。

ここに画像の説明を入力

試してみましたが、ポップオーバー ページをタブ ビュー内のルート ページとして設定していないため、ページが表示されません。

tabs.html

<ion-tabs #myTab>
  <ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>  
  <ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>    
</ion-tabs>

tabs.ts

 presentPopover(event) {
    let popover = this.popoverCtrl.create(TabPopoverPage, {});
    popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
  }

tabPopover.html

<ion-content padding>
  <ion-list>
    <button ion-item (click)="openPage('SalonDetailsPage')">
      <ion-icon name="theme-profile" item-left></ion-icon>
      Profile Page
    </button>
    <button ion-item (click)="openPage('SalesReportPage')">
      <ion-icon name="theme-wallet" item-left></ion-icon>
      Sales Report
    </button>
    <button ion-item (click)="openPage('SettingsPage')">
      <ion-icon name="theme-setting" item-left></ion-icon>
      Setting
    </button>
  </ion-list>
</ion-content>

tabPopover.ts

openPage(pageName: any) {
    // this.navCtrl.setRoot(pageName);    
    this.navCtrl.push(pageName);
  }

助けていただければ幸いです！

4

1 に答える 1

1

この実装は最善ではなく、おそらくこの問題を解決する方法は他にもたくさんありますが、これが最も簡単でした。ここで実際の例を見つけることができます: https://stackblitz.com/edit/ionic-v3-custom-tabs

プログラムで新しいion-tabアイテムを追加する方法があるかもしれませんが、イオンドキュメントでそれを見つけることができませんでしたが、これがこの質問に基づいた実装の私の見解です

ステップ1：

現在 4 つのタブ項目があり、必要なタブ項目を追加します。

<ion-tab [root]="tab4Root" show= "false"  tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
<ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>

show 属性 show: に注意してください: ionic docs によると、タブ要素を非表示にします。https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties これにより、ion-tab 要素が作成されますが、非表示になります。

ステップ2：

すでに定義されているion-tabs要素への参照が必要です<ion-tabs #myTab>

ページ: tabs.ts

// テンプレート参照を使用してion-tabsを取得し、それをローカル変数に割り当てますtabRef

@ViewChild('myTab') tabRef: Tabs;

presentPopover(event) {
    let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
    popover.present({ ev: { target: event.btn._elementRef.nativeElement } });

  }

このコンポーネント (TabsPage) を参照する方法が必要なので、nav パラメーターとして渡し ます https://ionicframework.com/docs/api/components/popover/PopoverController/#create https://ionicframework.com/docs /api/navigation/NavParams/#get

ステップ 3:

ページ: popover.html

<button ion-item (click)="openPage(4)">
  <ion-icon name="person" item-left></ion-icon>
  Profile Page
</button>
<button ion-item (click)="openPage(5)">
  <ion-icon name="cash" item-left></ion-icon>
  Sales Report
</button>
<button ion-item (click)="openPage(6)">
  <ion-icon name="settings" item-left></ion-icon>
  Setting
</button>

// 各数字は、ナビゲートして表示したいページのタブ インデックスを表します: https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab

ページ: ポップオーバーページ

// the tabs page ref
tabsPageRef: TabsPage;

constructor(
    public navCtrl: NavController, 
    public navParams: NavParams
    ) {
    // recall the navpage: this from the TabsPage?
      this.tabsPageRef = this.navParams.get('navpage');
  }


  openPage(pageName: any) {
    // here, we are using the reference of the TabsPage to access the local variable tabref
    this.tabsPageRef.tabRef.select(pageName)
  }
于 2019-01-02T19:56:53.877 に答える