angular - 更改选项卡时，Ionic2-Super-Tabs 内容变为空

Question

我正在使用 ionic2-super-tabs v4.3.1。我有 3 个用于组件内部的选项卡（它不是用于主导航。用作分段控件）。我已将组件设置为根。

首次加载页面时，默认选择选项卡 0。此选项卡的内容可见。选择第二个选项卡时，内容变为空。此外，再次选择第一个选项卡时，其内容也变为空。

仅在 iOS v14.5 及更高版本上才开始突然发生问题。所有其他 iOS 版本和 Android 都没有问题。

还有其他人面临类似的问题吗？如果有人设法解决此问题，请与我分享

<ion-content class="bodyContent">
    <div style="height: 100%" *ngIf="isShowTab">
        <super-tabs [scrollTabs]="false" id="timeline" #timeline (tabSelect)="onTabSelect($event)">
            <super-tab [root]="Page1" [rootParams]="page3Parameter" title="One"></super-tab>
            <super-tab [root]="Page2" [rootParams]="page2Parameter" title="Two"></super-tab>
            <super-tab [root]="Page3" [rootParams]="page1Parameter" title="Three"></super-tab>
        </super-tabs>
    </div>
</ion-content>

子页面模块

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ChartPage2 } from './chart2';


@NgModule({
  declarations: [
    ChartPage2,
  ],
  providers: [],
  imports: [
    IonicPageModule.forChild(ChartPage2),
  ],
})
export class ChartPageModule {}

子页面

import {Component} from '@angular/core';
import {IonicPage} from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-chart2',
  templateUrl: 'chart2.html',
})
export class ChartPage2 {

  constructor(){
    console.log('RootPage init');
  }

  public onEnter(): void {
    console.info('Workaround: Tab1Component -> onEnter. Loaded state:');
    this.initView();
  }

  private initView(): void {
    console.log("Root page InitView")
  }
}

子页面html

<ion-content>
  <div class="taptoretry">
    <div style="font-weight: bold; color:black; font-size:110%; display: inline;color :rgb(70, 69, 69);">There is content in the root component.
    </div>
  </div>
</ion-content>

标签： angularionic-frameworkionic-tabs