IONIC - tabs are gone

Question

IONIC - tabs are gone

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a problem, my tags are gone. They just do not show up

tabs.ts

import { Component } from '@angular/core';
import { HomePage } from '../home/home';
import { SobrePage } from '../sobre/sobre';

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

  tab1Root = HomePage;
  tab2Root = SobrePage;
  //tab3Root = AreaPage;

  constructor() {

  }
}

tabs.html

<ion-tabs color="primary" >
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home">Principal</ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Sobre" tabIcon="information-circle">Sobre</ion-tab>
  <!--<ion-tab [root]="tab3Root" tabTitle="Praticar" tabIcon="ios-school-outline">Praticar</ion-tab> -->
</ion-tabs>

ionic tabs

asked by anonymous 27.04.2018 / 02:33

2 answers

Django FileField Restriction in Image and Video IDLE software locks with encoding

score 0 · Answer 1

Possibly is the typing error of the variable name within [root] on the second tab:

<ion-tab [root]="tab2oot" tabTitle="Sobre" tabIcon="information-circle">Sobre</ion-tab>

Should be:

<ion-tab [root]="tab2Root" tabTitle="Sobre" tabIcon="information-circle">Sobre</ion-tab>

To stay as tab2Root = SobrePage;

score 0 · Answer 2

app.component.ts import {TabsPage} from './../pages/tabs/tabs'; import {DatabaseProvider} from './../providers/database/database'; import {Component} from '@ angular / core'; import {Platform} from 'ionic-angular'; import {StatusBar} from '@ ionic-native / status-bar'; import {SplashScreen} from '@ ionic-native / splash-screen'; import {HomePage} from '../ pages / home / home';

@Component ({ templateUrl: 'app.html' })

export class MyApp {

rootPage: any = TabsPage;

constructor (platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, dbProvider: DatabaseProvider) {

platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  statusBar.styleDefault();

  //Criando o banco de dados
  dbProvider.createDatabase()
    .then(() => {
      // fechando a SplashScreen somente quando o banco for criado
      this.openHomePage(splashScreen);
    })
    .catch(() => {
      // ou se houver erro na criação do banco
      this.openHomePage(splashScreen);
    });
});

} private openHomePage (splashScreen: SplashScreen) { splashScreen.hide (); this.rootPage = HomePage; } }