Ionic 2 Super Tabs在浏览器中无法正常显示

时间:2017-07-16 06:28:22

标签: ionic2 ionic-tabs

我正在使用Ionic CLI v3.5.0和Ionic2 Super Tabs v3.0.2 但是标签显示不正确。单击选项卡时,页面会更改,但不会显示。

这是我的app.module.ts。我已经添加了SuperTabsModule.forRoot(),如文档中所示。

    import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SuperTabsController} from 'ionic2-super-tabs';



import { MyApp } from './app.component';
import { ExplorePage } from '../pages/explore/explore';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { CoachingsPage } from '../pages/coachings/coachings';
import { TutorsPage } from '../pages/tutors/tutors';


@NgModule({
  declarations: [
    MyApp,
    ExplorePage,
    CoachingsPage,
    TutorsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    SuperTabsModule.forRoot(),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ExplorePage,
    CoachingsPage,
    TutorsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

这是我的tab.ts文件。这里我的页面没有使用延迟加载,所以我还没有在这里添加SuperTabsModule。我添加了它但是没有用。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CoachingsPage } from '../coachings/coachings';
import { TutorsPage } from '../tutors/tutors';


/**
 * Generated class for the ExplorePage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-explore',
  templateUrl: 'explore.html',
})
export class ExplorePage {

    tab1Root:any = CoachingsPage;
    tab2Root:any =  TutorsPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

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

}

这是tabs.html文件:

<super-tabs>
<super-tab [root]="tab1Root" title="Top Tutors"></super-tab>
<super-tab [root]="tab2Root" title="Top Coaching"></super-tab>
</super-tabs>

1 个答案:

答案 0 :(得分:0)

已经有一段时间但是我遇到了同样的问题,我终于发现没有加载超级标签CSS。 您可以尝试检索CSS并将其作为测试放在您的一个文件中。