angular - 在我的 ionic 仪表板页面中使用超级选项卡，当我进入仪表板页面时，我的选项卡页面都在加载。我希望它们仅在请求时加载

Question

我正在构建一个使用 supertabs 的 ionic 5 应用程序。我有五个超级标签（A、B、C、D、E）。在每个 tabPage.ts 中，我使用 ngOnInit 为每个选项卡的任务初始化变量。我的问题是我注意到每个选项卡中的 ngOnInit 方法在我选择之前被执行。我怀疑这种情况正在发生，因为所有超级选项卡页面都是同时加载的......不仅仅是默认选项卡。这是预期的行为吗？我正在使用延迟加载来加载页面。我还检查了 PreLoadStrategy 无效。这就是我的 .html 的样子：

<!-- <app-header [title]='title'></app-header> -->
<ion-header>
   <ion-toolbar *ngIf="!searchbar" color="orange">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons >
    <ion-title color="light"><b>Dashboard</b></ion-title>
    <!-- <ion-buttons slot="end">
      <ion-icon color="light" size="large" name="search-sharp" (click)="searchbar = true"></ion-icon>
    </ion-buttons> -->
    <ion-buttons slot="end">
      <ion-icon color="light" (click)="openProfile()" size="large" name="person-circle-outline"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar *ngIf="searchbar">
    <ion-searchbar placeholder="Search..."
     (ionCancel)="searchbar = false" [debounce]="250" showCancelButton="always"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<super-tabs activeTabIndex="1" [config]="{ debug: true, sideMenu: 'left', allowElementScroll: true, nativeSmoothScroll: true }">
  <super-tabs-toolbar color="primary" slot="top">
    <super-tab-button>
      <ion-label color="light">A</ion-label>
    </super-tab-button>
    <super-tab-button>
      <ion-label color="light">B</ion-label>
    </super-tab-button>
    <super-tab-button>
      <ion-label color="light">C</ion-label>
    </super-tab-button>
    <super-tab-button>
      <ion-label color="light">D</ion-label>
    </super-tab-button>
    <super-tab-button>
      <ion-label color="light">E</ion-label>
    </super-tab-button>
  </super-tabs-toolbar>

  <super-tabs-container autoScrollTop>
    <super-tab>
      <ion-nav [root]="a"></ion-nav>
    </super-tab>
    <super-tab>
      <ion-nav [root]="b"></ion-nav>
    </super-tab>
    <super-tab>
      <ion-nav [root]="c"></ion-nav>
    </super-tab>
    <super-tab>
      <ion-nav [root]="d"></ion-nav>
    </super-tab>
    <super-tab>
      <ion-nav [root]="e"></ion-nav>
    </super-tab>
  </super-tabs-container>
</super-tabs>

标签： angularionic-framework