从边栏路由时,Ionic 3标签栏消失

时间:2020-10-27 10:11:13

标签: html angular ionic-framework ionic3

在My ionic 3应用程序中,从侧栏导航时,选项卡栏消失。所有其他页面都工作正常。仅当从侧边栏布线时,选项卡才消失。

这是我的app.html

<ion-menu [content]="content" type="overlay">
  <ion-content class="menubar">
    <ion-list class="mainmenu">

      <div class="profile">
        <ion-row>
          <ion-col col-4><img src="./assets/imgs/wgs-logo.png" alt=""></ion-col>
          <ion-col col-8 class="j-c-center" (click)="openLandingPage()">
            <ion-icon slot="start" class="landing-page-icon" name="custom-landing-page"></ion-icon>
          </ion-col>
        </ion-row>
      </div>
      <ion-item no-lines class="menuitem" *ngFor="let cate of categoryFullData;  let i = index;">
        <button ion-button clear menuToggle (click)="opencategory(cate.id, cate.categry)">
          <img src="{{baseUrlImage}}{{cate.cateimg}}">
          &nbsp;&nbsp;<p>{{cate.categry}}</p>
        </button>
        <ion-icon slot="end" name="ios-arrow-down" class="icon-down-arrow" (click)="menuItemHandler(i)"></ion-icon>
        <ion-item-group submenu [class.visible]="showSubmenu[i]">
          <ion-item no-lines class="menuitem" *ngFor="let subcate of cate.subcategories;  let i = index;">
            <button ion-button clear (click)="opencategory(subcate.id, subcate.categry)" menuToggle>
              <img src="{{baseUrlImage}}{{subcate.cateimg}}">
              &nbsp;&nbsp;<p>{{subcate.categry}}</p>
            </button>
          </ion-item>
        </ion-item-group>
      </ion-item>
      
      <ion-item no-lines class="menuitem">
        <button ion-button clear menuToggle (click)="openLandingPage()">
          <a href="{{baseUrlImage}}admin">Sell</a>
        </button>
      </ion-item>

      <ion-item no-lines class="menuitem">
        <button ion-button clear menuToggle (click)="openAboutUs()">
          <p>About Us</p>
        </button>
      </ion-item>

      <ion-item no-lines class="menuitem">
        <button ion-button clear menuToggle (click)="openTermsAndConditions()">
          <p>Terms & Conditions</p>
        </button>
      </ion-item>

      <ion-item no-lines class="menuitem">
        <button ion-button clear menuToggle (click)="openPrivacyPolicy()">
          <p>Privacy Policy</p>
        </button>
      </ion-item>
    
    </ion-list>

  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

这是我的app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, App, LoadingController, AlertController, ToastController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NotificationsPage } from '../pages/notifications/notifications';
import { OrderHistoryPage } from '../pages/order-history/order-history';
import { ContactPage } from '../pages/contact/contact';
import { FeedbackPage } from '../pages/feedback/feedback';
import { HomePage } from '../pages/home/home';
import { OffersPage } from '../pages/offers/offers';
import { TermsPage } from '../pages/terms/terms';

import { HkApiproviderProvider } from '../providers/hk-apiprovider/hk-apiprovider';
import { CategoryPage } from '../pages/category/category';
import { LanguageServiceProvider } from '../providers/language-service/language-service';
import { TranslateService } from '@ngx-translate/core';
import { TabsPage } from '../pages/tabs/tabs';
import { ProductsPage } from '../pages/products/products';
import { LandingPage } from '../pages/landing-page/landing-page';
import { PrivacyPage } from '../pages/privacy/privacy';

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

  @ViewChild(Nav) nav: Nav;
  validEmail:any;
  rootPage: any = TabsPage;
  showSubmenu = [];
  resposeData: any;
  categoryFullData:any;

  pages: Array<{title: string, component: any}>;

  apptoken = {"token":""};

  postData={
    "user_id":"",
    "token":"",
  }
  baseUrlImage: any;
  itemsuperqty: number;
  userDetails: any;
  


  constructor(public platform: Platform, public auth:HkApiproviderProvider,public app:App, public toastCtrl: ToastController, public loadingCtrl:LoadingController, public alertCtrl:AlertController,  public statusBar: StatusBar, public splashScreen: SplashScreen,public langserv : LanguageServiceProvider,  translate: TranslateService) {
    this.initializeApp();
    this.apptoken.token = HkApiproviderProvider.gettoken();
    localStorage.setItem('appconfig', JSON.stringify(this.apptoken));
    langserv.getdefaultlang();
    translate.setDefaultLang(langserv.defaultlang);
    this.langserv.changelang('en');
    this.itemsuperqty = 1;
    this.baseUrlImage = auth.getimage();
    if(localStorage.getItem('userData')){
      const data = JSON.parse(localStorage.getItem('userData'));
      this.userDetails = data.userData;
    }

    this.postData.token = HkApiproviderProvider.gettoken();
    this.getcategorydata();
  }

  /* menuItemHandler(): void {
    this.showSubmenu = !this.showSubmenu;
  } */

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.backgroundColorByHexString('#307722');
      this.splashScreen.hide();
    });
  }
  
  onclickHome(){
    this.nav.setRoot(HomePage , { tabIndex: 0 });
  }

  onclickcategory(){
    this.nav.push(CategoryPage , { tabIndex: 0 });
  }

  onclickMyOrder(){
    this.nav.push(OrderHistoryPage , { tabIndex: 1 });
  }

  openContact(){
    this.nav.push(ContactPage , { tabIndex: 0 });
  }

  onclickNoti(){
    this.nav.push(NotificationsPage , { tabIndex: 0 });
  }

  openfeedback(){
    this.nav.push(FeedbackPage , { tabIndex: 0 });
  }

  openoffers(){
    this.nav.push(OffersPage , { tabIndex: 0 });
  }

  openterms(){
    this.nav.push(TermsPage , { tabIndex: 0 });
  }

  openprivacy(){
    this.nav.push(TermsPage , { tabIndex: 0 });
  }
  openLandingPage(){
    this.nav.push(LandingPage);
  }



  checkLogin(){
    if(localStorage.getItem('userData')){
      return true;
    }else{
      return false;
    }
  }

  menuItemHandler(index): void {
    if(this.showSubmenu[index] && this.showSubmenu[index] == false) {
      this.showSubmenu[index] = true;
    } else if (this.showSubmenu[index] && this.showSubmenu[index] == true) {
      this.showSubmenu[index] = false;
    } else {
      this.showSubmenu[index] = true;
    }
  }


  public getcategorydata()
  {
    let zest = this.loadingCtrl.create({
      content: "Getting Data..",
      duration:20000,
      spinner:'crescent'
    });  
  
    zest.present();
  
      this.auth.postData(this.postData, "getcategory").then((result) => {
          this.resposeData = result;
          this.categoryFullData = this.resposeData.Data;
          //console.log(result);
          zest.dismiss();
      }, (err) => {
        zest.dismiss();
      });
  }

  opencategory(category, cname){
    this.nav.push(ProductsPage,{
      category : category,
      cname : cname,
      tabIndex: 1
    });
  }

  openAboutUs() {
    this.nav.push(ContactPage);
  }

  openTermsAndConditions() {
    this.nav.push(TermsPage);
  }

  openPrivacyPolicy() {
    this.nav.push(PrivacyPage);
  }

}

这是我的tabs.html页面

<ion-tabs>
  <ion-tab [root]="tab6Root" class="tab-bar" tabIcon="custom-landing-page">
  </ion-tab>
  <ion-tab [root]="tab1Root" class="tab-bar" tabIcon="ios-home-outline">
  </ion-tab>
  <ion-tab [root]="tab2Root" class="tab-bar" tabIcon="ios-person-outline">
  </ion-tab>
  <ion-tab [root]="tab3Root" class="tab-bar" tabIcon="icon-cart-white" [tabBadge]="cartCounterManager()">
  </ion-tab>
  <ion-tab [root]="tab4Root" class="tab-bar" tabIcon="ios-heart-outline" [tabBadge]="wishListCounterManager()">
  </ion-tab>
  <ion-tab [root]="tab5Root" class="tab-bar" tabIcon="ios-search-outline">
  </ion-tab>
</ion-tabs>

tabs.component.ts

import { Component } from '@angular/core';
import { ProductSearchPage } from '../product-search/product-search';
import { ProfilePage } from '../profile/profile';
import { HomePage } from '../home/home';
import { CartPage } from '../cart/cart';
import { WishListPage } from '../wishlist/wishlist';
import { NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { ProductsPage } from '../products/products';
import { LandingPage } from '../landing-page/landing-page';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root = HomePage;
  tab2Root = ProfilePage;
  tab3Root = CartPage;
  tab4Root = WishListPage;
  tab5Root = ProductSearchPage;
  tab6Root = LandingPage;
  selectedIndex: Number;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
  ){
  }

  ionViewDidLoad() {
    this.selectedIndex = this.navParams.get('tabIndex') || 0;
    console.log(this.selectedIndex)
  }

  cartCounterManager(){
    return HomePage.cartData.length
  }

  wishListCounterManager(){
    return HomePage.wishListData.length
  }

}

我尝试了所有可用的方法,但均无效果。请帮忙。每个小小的评论将不胜感激。

0 个答案:

没有答案
相关问题