2017-07-16 99 views
2

我正在使用Ionic CLI v3.5.0和Ionic2 Super Tabs v3.0.2 但是这些选项卡显示不正常。点击标签后,页面发生变化,但不显示。 Ionic 2 Super Tabs在浏览器中无法正常显示

这是我的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> 

回答

0

它已经有一段时间,但我有同样的问题,你有,我终于发现超级CSS标签未加载。 您可以尝试检索CSS并将其放入您的某个文件中作为测​​试。

相关问题