ionic 组件修改——tab为例

新增tab页面

新建一个新页面（组件）

ionic g page news

app.module.ts文件注册

//引入NewsPage组件
import { NewsPage } from '../pages/news/news';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage //申明组件
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage //申明组件
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

tab.ts文件

//引入NewsPage组件
import { NewsPage } from '../pages/news/news';

tab4Root = NewsPage;   //申明组件

tab.html文件

<ion-tab [root]="tab4Root" tabTitle="News" tabIcon="apps">ion-tab>

[root]=”组件”： 加载组件
tabTitle=”名称”： tab下面的名称
tabIcon=”icon”： 图标
显示结果

新增新闻详情页面

同上——新建页面（组件）——注册

在news页面跳转到newsinfo页面
在news.html文件

(click)="goInfo()"   //跳转事件

在news.ts文件

goInfo(){  //跳转函数
  this.navCtrl.push(NewsinfoPage)  //跳转到下一个页面
}

如何去掉子页面中的tab
在app.module.ts文件中

// IonicModule.forRoot(MyApp),   //去掉原来的代码

IonicModule.forRoot(MyApp, {
  tabsHideOnSubPages: 'true'   //隐藏全部子页面的tabs
})

修改返回按钮
app.module.ts文件中

IonicModule.forRoot(MyApp, {
  tabsHideOnSubPages: 'true',   //隐藏全部子页面的tabs

  //在模块中修改
  backButtonText: ''    //自定义“后退”样式
})