angular4 自定义一个tabs组件以及改变显示位置问题

1.首先创建一个组件：

ionic g component artistTabs

2.将组件添加到 app.module.ts的declarations数组里面：

import { ArtistTabsComponent } from './pages/artist/components/artist-tabs/artist-tabs';

declarations: [
   MyApp,
   ArtistTabsComponent
 ],

3.在artist-tabs.html页面里面：

<ion-tabs>
  <ion-tab [root]="tab1" tabTitle="My Works"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Following"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Explore"></ion-tab>
  <ion-tab [root]="tab4" tabTitle="What's New"></ion-tab>
</ion-tabs>

4.在artist-tabs.ts页面里面：

import { Component } from '@angular/core';
import { WorksPage } from '../../works/works';
import { FollowingPage } from '../../following/following';
import { ExplorePage } from '../../explore/explore';
import { NewPage } from '../../new/new';

@Component({
  selector: 'artist-tabs',
  templateUrl: 'artist-tabs.html'
})
export class ArtistTabsComponent {
  tab1: any;
  tab2: any;
  tab3: any;
  tab4: any;

  constructor() {
    this.tab1 = WorksPage;
    this.tab2 = FollowingPage;
    this.tab3 = ExplorePage;
    this.tab4 = NewPage;  
  }
}

5.在需要的页面引入：

<artist-tabs style="width: 100%; height: 80%; position: absolute; top: 6rem; z-index: 999;"></artist-tabs>

这些样式是我的页面中需要的，大家可以根据自己的项目来修改。
以上就是自定义组件的全部了，下面我说下关于tabs的显示位置问题：

image.png

其实特别简单！！！

<ion-tabs tabsPlacement="top"></ion-tabs>

加上 tabsPlacement="top" 就ok了！

======================= 补充补充 ==============================

这里的config有详细的介绍： https://ionicframework.com/docs/api/config/Config/

IonicModule.forRoot(MyApp, {
      backButtonText: 'Go Back',
      iconMode: 'ios',
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
      tabsPlacement: 'bottom',                   //  就是这里设置的 
      pageTransition: 'ios-transition'
 }, {}

还有通过平台设置的：

IonicModule.forRoot(MyApp, {
      tabsPlacement: 'bottom',
      platforms: {
        ios: {
          tabsPlacement: 'top',                  //  就是这里设置的 
        }
      }
    }, {}