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。然后在您的导出@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') tabs : IonTabs;与

一起导入

import { IonTabs } from '@ionic/angular'

然后，您可以在组件中根据需要设置默认标签：

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

Ionic 4预先选择模式中的标签

1 个答案: