如何在离子2应用中添加选项卡

Question

我正在尝试在一个离子2应用中添加两个简单的选项卡，但是由于我是Angularjs和ionic 2的事实，我遇到了一些麻烦。我阅读了在离子文档周围并四处搜索，但我认为我缺少一些东西。我无法显示我的标签。在我现在拥有的代码下方：

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.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 。该应用程序正在加载且运行良好，但没有显示选项卡。有帮助吗？预先感谢

Answer 1

您应该通过TabSpage组件中使用的模板扩展代码示例。官方离子文档后，基本标签的使用应该非常简单。

尝试在某些主要离子标签中移动选项卡HTML标签，例如<ion-content></ion-content>或<ion-header></ion-header>。

作为旁注，我建议将ng-socket-io插件用于Angular2，它非常适合Angular的体系结构，并允许您在服务中检索数据并从组件中订阅它。您可以在官方NG-Socket-IO存储库中找到此设计模式的示例