ionic3学习（3）：页面跳转以及隐藏二级菜单tabs和修改返

1. 首先新建一个页面(ptest)

进入项目目录，然后创建页面（ptest）

# cd /Volumes/My\ Mac1/code/secondDemo   //进入项目目录

# ionic g page ptest

页面创建好后会出现在page目录下

通过命令行创建的页面如图        

---

2. 创建了页面还需要在app.module.ts中引入页面，并且申明

如图三个位置需要修改，代码如下    

// 页面ptest注册一下下

import { PtestPage } from '../pages/ptest/ptest';

declarations: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    TabsPage,

    PtestPage

  ],

entryComponents: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    TabsPage,

    PtestPage

  ],

3. 实现页面的跳转

在contact页面写个按钮跳转

<button ion-button item-end full (click)="goPtest()">跳转到ptest</button>

方法1:使用navCtrl来跳转，在contact.ts文件写goPtest()方法

使用navCtrl方式跳转

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { PtestPage } from '../ptest/ptest'; //引入ptest页面

@Component({

selector: 'page-contact',

templateUrl: 'contact.html'

})

export class ContactPage {

constructor(public navCtrl: NavController) {

}

goPtest(){

this.navCtrl.push(PtestPage); //跳转

}

}

按钮 点击按钮后跳转

另外我们再用另外一种方法实现跳转

方法2:navPush跳转

navPush跳转html页面

<button ion-button item-end full [navPush]="PtestPage">跳转到ptest</button>

navPush跳转ts页面

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { PtestPage } from '../ptest/ptest'; //引入ptest页面

@Component({

selector: 'page-contact',

templateUrl: 'contact.html'

})

export class ContactPage {

public PtestPage=PtestPage;

constructor(public navCtrl: NavController) {

}

}

4. 实现修改返回按钮的文字以及在二级目录下隐藏tabs栏

先来看看效果图对比一下

这是跳转前 未修改默认是这样的 修改后的效果

修改代码很简单，在app.module.ts下修改imports中代码如下：

imports: [

    BrowserModule,

    HttpModule,

    IonicModule.forRoot(MyApp,{

    tabsHideOnSubPages: 'true',        //隐藏全部子页面tabs

    backButtonText: "返回"  /*修改返回按钮为返回（默认是）*/

    })

  ],

修改：20180829，欢迎交流tiutiu号：1216078547，以上，下期介绍一下仿QQ微信在tabs上实现消息提醒，并实时监测修改tabs上的数字。随缘更新。。咕咕咕～