Как добавить вкладки на новой странице при переходе на новую страницу в Ionic?

Question

Я создаю приложение, где пользователи могут просматривать разные колледжи. Что я сделал сейчас, так это нажав на кнопку, чтобы открыть новую страницу со списком колледжей. скажем колледжи под "инженерным" и под "медицинским".

Мне нужно добавить вкладки под, чтобы я мог добавить инженерные и медицинские вкладки. и при нажатии на вкладки я могу посетить этот список. Я нашел учебники на вкладках, и многие из них говорят о том, чтобы поместить TabsPage в качестве корневой страницы в app.component.ts.

Но мне не нужно мое полное приложение, чтобы быть вкладками. Мне нужна только эта отдельная часть. Я опубликую то, что я попробовал ниже.

При нажатии кнопки для перехода на корневую страницу:

import { CollegerootPage } from '../collegeroot/collegeroot';
this.navCtrl.push(CollegerootPage);

Теперь я создал CollegerootPage:

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

/**
 * Generated class for the CollegerootPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  templateUrl: 'collegeroot.html',
})
export class CollegerootPage {
  rootPage:any = TabsPage;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

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

}

Collegeroot.html:

<ion-nav [root]="rootPage"></ion-nav>

Также создан TabsPage:

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Engineering" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Medical" tabIcon="information-circle"></ion-tab>
</ion-tabs>

TabsPage.ts:

import { Component } from '@angular/core';
import { IndianstudiesPage } from '../indianstudies/indianstudies';
/**
 * Generated class for the TabsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  tab1Root = IndianstudiesPage;
  tab2Root = IndianstudiesPage;
  constructor() {
    console.log("TABPAGE");
  }

}

Теперь, когда я попытался, я не получил никаких вкладок. В iOS это также дает черный экран.

Пожалуйста помоги..