从一个离子选项卡页面导航到另一个离子选项卡页面会加载两个选项卡式页面，第二个选项卡位于第一个选项卡中

Question

我有两页。第一个。

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, Tabs } from 'ionic-angular';
import { SharedmethodsProvider } from '../../providers/sharedmethods/sharedmethods';


@Component({
  selector: 'page-courses-dashboard',
  templateUrl: 'courses-dashboard.html',
})
export class CoursesDashboardPage {
  @ViewChild('dashboardTabs') tabRef: Tabs;

  currentCourses: any = 'CoursesDashboardCurrentPage';
  featuredCourses: any = 'CoursesDashboardFeaturedPage';
  upcomingCourses: any = 'CoursesDashboardUpcomingPage';
  pastCourses: any = 'CoursesDashboardPastPage';

  constructor(public navCtrl: NavController, public navParams: NavParams,public sharedmethods: SharedmethodsProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CoursesDashboardPage');
  }

  ionViewDidEnter() {
    this.tabRef.select(0);
  }

}

其视图为

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Courses</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-tabs #dashboardTabs>
    <ion-tab [root]="currentCourses" tabTitle="Current" tabIcon="infinite"></ion-tab>
    <ion-tab [root]="featuredCourses" tabTitle="Featured" tabIcon="star"></ion-tab>
    <ion-tab [root]="upcomingCourses" tabTitle="Upcoming" tabIcon="trending-up"></ion-tab>
    <ion-tab [root]="pastCourses" tabTitle="Past" tabIcon="time"></ion-tab>
  </ion-tabs>
</ion-content>

其中显示的一个标签是

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

@IonicPage()
@Component({
  selector: 'page-courses-dashboard-current',
  templateUrl: 'courses-dashboard-current.html',
})
export class CoursesDashboardCurrentPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CoursesDashboardCurrentPage');
  }

  viewCourseDetails() {
    this.navCtrl.push('CourseViewPage');
  }

}

CoursViewPage是另一个标签页。

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Course Details</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-tabs #courseViewTabs>
    <ion-tab [root]="overview" tabTitle="Overview" tabIcon="infinite">Overview</ion-tab>
    <ion-tab [root]="lessons" tabTitle="Lessons" tabIcon="infinite">Lessons</ion-tab>
    <ion-tab [root]="exercises" tabTitle="Exercises" tabIcon="infinite">Excercises</ion-tab>
    <ion-tab [root]="assessments" tabTitle="Assessments" tabIcon="infinite">Assessments</ion-tab>
    <ion-tab [root]="discussions" tabTitle="Discussions" tabIcon="infinite">Discussions</ion-tab>
  </ion-tabs>
</ion-content>

视图在这里

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Tabs } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-course-view',
  templateUrl: 'course-view.html',
})
export class CourseViewPage {
  @ViewChild('courseViewTabs') tabRef: Tabs;

  overview: any = 'CourseViewOverviewPage';
  lessons: any = 'CourseViewLessonsPage';
  exercises: any = 'CourseViewDiscussionsPage';
  assessments: any = 'CourseViewAssessmentsPage';
  discussions: any = 'CourseViewDiscussionsPage';

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CourseViewPage');
  }

  ionViewDidEnter() {
    this.tabRef.select(0);
  }

}

结果如下。

如何确保第二个标签页未加载到第一个标签页中？另外，请务必注意，第一个CoursesDashboardPage不是延迟加载的，但是所有选项卡式页面都是延迟加载的。任何帮助将不胜感激。

ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.3 @ionic/app-scripts : 3.2.3