Question

我在离子框架中创建了一个简单的标签布局应用程序。我创建了一个Extra选项卡，并尝试与其他选项卡一样实现。但是当我试着

时

一切都和其他标签一样！我在这里失踪了什么？

My app.module.ts is:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { ListPage } from '../pages/lists/lists';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    ListPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    ListPage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

这里ListPage是我创建的额外课程！我对此很新！

TabsPage是：

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { ListPage } from '../lists/lists';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = ListPage;

  constructor() {

  }
}

lists.ts文件是：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-lists',
  templateUrl: 'lists.html'
})
export class ListPage {

  constructor(public navCtrl: NavController) {

  }
}

Answer 1

请检查您的tabs.html。应该是这样的：

<ion-tabs>
    <ion-tab  [root]="tab1Root"></ion-tab>
    <ion-tab  [root]="tab2Root"></ion-tab>
    <ion-tab [root]="tab3Root"></ion-tab>
    <ion-tab [root]="tab4Root"></ion-tab>
</ion-tabs>

页面未加载在tablayout离子3中

1 个答案: