Ionic 2 Super 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 ответ

Это было какое-то время, но у меня была та же проблема, что и у вас, и я, наконец, обнаружил, что CSS с супер вкладками не загружен Вы можете попробовать извлечь CSS и поместить его в один из ваших файлов в качестве теста.

Другие вопросы по тегам