如何在 IONIC 2 应用程序中添加选项卡

Posted 2023-03-13

【中文标题】如何在 IONIC 2 应用程序中添加选项卡

【英文标题】：How to add tabs in a IONIC 2 app

【发布时间】：2017-11-04 16:23:21

【问题描述】：

我正在尝试在 ionic 2 应用程序中添加两个简单的选项卡，但由于我是 AngularJs 和 ionic 2 的新手，我遇到了一些麻烦。我阅读了 Ionic 文档并搜索了周围但是我想我错过了一些东西。我无法显示我的标签。下面是我现在拥有的代码：

HOME.TS

import  Component  from '@angular/core';
import  LoadingController  from 'ionic-angular';
import  NavController  from 'ionic-angular';
import  TabsPage  from './tabs'
import * as io from 'socket.io-client';

@Component(
    selector: 'page-home',
    templateUrl: 'home.html'
)
export class HomePage 
    tabs: any;
    socket: any;
    chat_input: string;
    chats = [];
    prova = [];
    photoValue = [];
    rangeSettings: number;
    slideValueBadge = [];
    constructor(public navCtrl: NavController, public loadingCtrl: LoadingController) 
        this.socket = io('http://192.168.1.21:3000');
        this.socket.on('photo', (value) => 
            //Debug purpose
            //console.log("Luminosità: ", value);
            this.photoValue.push(value);
        );
        this.tabs = TabsPage;
    
//SOME OTHER CODES

TABS.TS

import  Component  from '@angular/core';

import  HomePage  from '../home/home';
import  ServerSetts  from '../home/serverSetts';

@Component(
    templateUrl: 'tabs.html'
)
export class TabsPage 
    tab1Root: any = HomePage;
    tab2Root: any = ServerSetts;


    constructor() 

    

SERVERSETTS.TS

import  Component  from '@angular/core';

@Component(
    templateUrl: 'serverSetts.html'
)
export class ServerSetts 
   constructor() 

APP.MODULE.TS

import  NgModule, ErrorHandler  from '@angular/core';
import  IonicApp, IonicModule, IonicErrorHandler  from 'ionic-angular';
import  MyApp  from './app.component';
import  HomePage  from '../pages/home/home';
import  ServerSetts  from '../pages/home/serverSetts';
import  TabsPage  from '../pages/home/tabs';

@NgModule(
  declarations: [
    MyApp,
      HomePage,
      ServerSetts,
      TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
      HomePage,
      ServerSetts,
      TabsPage
  ],
  providers: [provide: ErrorHandler, useClass: IonicErrorHandler]
)
export class AppModule 

当然我有一个 tabs.html、serverSetts.html 和一个 home.html。 该应用程序正在加载并且运行良好，但没有显示任何选项卡。请问有什么帮助吗？提前致谢

【参考方案1】：

您应该通过 TabsPage 组件中使用的模板来扩展您的代码示例。在official Ionic docs 之后，基本选项卡的使用应该非常简单。

尝试在一些主要的 Ionic 标签中移动你的标签 html 标签，例如<ion-content></ion-content> 或 <ion-header></ion-header>。

作为旁注，我建议为 angular2 使用 ng-socket-io 插件，该插件非常适合 Angular 的架构，并允许您检索服务中的数据并从组件中订阅它。你可以找到这个设计模式的例子in official ng-socket-io repository