Question

我正在创建一个用户可以查看不同学院的应用程序。我现在所做的是点击一个按钮，它将推出一个显示大学列表的新页面。说“工程”和“医疗”下的大学。

我需要添加标签，以便我可以在标签中添加工程和医疗。点击选项卡，我可以访问该列表。我在Tabs上找到了教程，其中许多人都说将TabsPage作为根页面放在app.component.ts中。

但我不需要我的完整应用程序是Tabs。我只需要那个单独的部分。我将发布我在下面尝试的内容。

单击按钮导航到根页面：

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中，它也会显示黑屏。

请帮助..

如何在新页面中添加选项卡导航到Ionic中的新页面？

0 个答案: