Ionic 4 預選模式中的選項卡

Question

我有一個模式，當我點擊一個按鈕時啟動

async launchCalculator() {
  const calculator = await this.modalController.create({
    component: CalculatorPage,
    componentProps: {
      dosingType: this.dosingType
    },
    showBackdrop: true,
  });
  return await calculator.present();
}

在模態內，我有 2 個選項卡。 我正在嘗試預選一個選項卡，但它不起作用。

<ion-header>
  <ion-toolbar>
    <ion-title>Dosing Calculator</ion-title>
  </ion-toolbar>
</ion-header>

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

  <ion-tabs >
    <ion-tab tab="standard">standard content</ion-tab>
    <ion-tab tab="hepatic">hepatic Content</ion-tab>

    <ion-tab-bar slot="top" [selectedTab]="dosingType">
      <ion-tab-button tab="standard">
        <ion-label>Standard</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="hepatic">
        <ion-label>Hepatic<br>Impairment</ion-label>
      </ion-tab-button>
    </ion-tab-bar>

  </ion-tabs>

</ion-content>

我在選項卡欄上設置了[selectedTab]並且它沒有預選選項卡。 如果我更改要使用的屬性：

<ion-tab-bar slot="top" selected-tab="standard">

它有點管用。 該選項卡此時至少具有選定的顯示狀態，但是，在我單擊該選項卡之前，選項卡內容（應顯示“標准內容”）不可見。 當然我做錯了什么。 有任何想法嗎？

弄清楚了

首先<ion-tabs #dosingTabs>添加一個 id。 然后在你的 export @ViewChild('dosingTabs') tabs:Tabs; 然后繼續調用this.tabs.select(<name or index>)

Answer 1

如果您在 html 模板中為 ion-tabs 指定一個 id，則使用 Ionic 4.6.0，如上所述：

<ion-tabs #tabs>

並在您相應的組件位置：

@ViewChild('tabs', { static: true }) tabs: IonTabs; 進口與

import { IonTabs } from '@ionic/angular'

然后您可以在組件中需要時使用此設置默認選項卡：

 this.tabs.select(<name or index>);