Question

我正在尝试在离子2应用程序中添加两个简单的选项卡，但是我遇到了一些麻烦，因为我是AngularJs和离子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 。该应用程序正在加载并且工作正常但没有显示选项卡。有什么帮助吗？提前致谢

Answer 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

如何在IONIC 2应用程序中添加标签

1 个答案: