在离子2中未显示的标签

Question

我在模态内有一个选项卡。我需要在模态内显示3个选项卡。但是，它没有显示。它只是空白。

<ion-header>
    <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="closeModal()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title class="filter">Filter</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-tabs>
  <ion-tab>Hello</ion-tab>
  <ion-tab>Hello</ion-tab>
  <ion-tab>Hello</ion-tab>
</ion-tabs>
</ion-content>

Answer 1

您将ion-tabs放入ion-content中。离子-TABS是许多ion-tab组件的容器，其中包含其自身的导航堆栈。该容器不能嵌套在ion-content中，并且需要是其自己的组成部分。

<ion-tabs>
  <ion-tab>Hello</ion-tab>
  <ion-tab>Hello</ion-tab>
  <ion-tab>Hello</ion-tab>
</ion-tabs>

从stackblitz测试代码中，您可以尝试在离子标签上方有一个公共标头。但是，您可能需要调整一些CSS，以使单个页面具有标头的空间。或者，您可以为每个页面分开设置标头：

<ion-header>
    <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="closeModal()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title class="filter">Filter</ion-title>
    </ion-navbar>
</ion-header> 

在您的标签中。