2017-01-25 15 views
5

के साथ एक नया पृष्ठ/घटक धक्का आयोनिक डॉक्स और जैसे प्रश्नों की मेरी समझ के अनुसार: How to keep tab when pushing a new page?Ionic2 - टैब गायब हो जाते हैं जब भी मैं navCtrl

मैं सही ढंग से किया है क्या छिपा हुआ जा रहा से अपने टैब बार रोकने के लिए आवश्यक है । स्पष्ट होने के लिए, टैब बार सही ढंग से दिखाता है जब नेविगेशन किसी भी टैब पेज पर शुरू होता है और आप स्टैक में किसी भी अन्य टैब पेज पर जाते हैं। जब भी आप एक एनएवी नियंत्रक या मोडल नियंत्रक आदि से "पुश" विधि का उपयोग करते हैं तो टैब बार गायब हो जाता है। मुझसे कहां गलती हो रही है?

नीचे दिए गए कोड में, व्यक्ति ऐप डाउनलोड करते समय पैदल यात्रा पर उतरता है। एक बटन है जो उन्हें निर्देशिका में ले जाता है जहां एक टैब बार भी होना चाहिए।

उस स्थिति में जब उपयोगकर्ता पहले से ही वॉचथ्रू देख चुका है, रूट पेज होम पेज पर सेट है, जहां टैब बार मौजूद है। यदि उपयोगकर्ता टैब बार का उपयोग कर होम पेज से डायरेक्टरी पेज पर जाता है तो टैब बार पेज के निचले हिस्से में सही जगह पर रहता है।

मेरी समझ से टैब जोड़ने के लिए HideOnSubPages: app.module.ts पर झूठी इस व्यवहार को रोक देगा लेकिन ऐसा नहीं है।

app.module.ts ...

imports: [ 
    IonicModule.forRoot(MyApp, { 
     tabsHideOnSubPages:false 
    }) 
] 

...

app.component.ts ...

import { Tabs } from '../pages/tabs/tabs'; 
import { Walkthrough } from '../pages/walkthrough/walkthrough'; 
@Component({ 
    templateUrl: 'app.html' 
}) 

export class MyApp { 
    rootPage: any = Tabs; 
    launchObject:any; 
    constructor(private platform: Platform){ 
    platform.ready().then(() => { 
     if(justDownloadedApp){ 
     this.rootPage = Walkthrough; 
     } 
    }) 
    } 
} 

...

app.component.html

<ion-nav [root]="rootPage"></ion-nav> 

tabs.ts

import { Component } from '@angular/core'; 
import { Home } from '../home/home'; 
import { Directory } from '../directory/directory'; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class Tabs { 
    tab1Root: any = Home; 
    tab2Root: any = Directory; 
    constructor(){} 
} 

tabs.html

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabsHideOnSubPages="false" tabTitle="Spotlight" tabIcon="flash"></ion-tab> 
    <ion-tab [root]="tab2Root" tabsHideOnSubPages="false" tabTitle="Stores" tabIcon="cart"></ion-tab> 
</ion-tabs> 

walkthrough.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Directory } from '../directory/directory'; 

@Component({ 
    selector: 'walkthrough', 
    templateUrl: 'walkthrough.html' 
}) 
export class Walkthrough { 
    constructor(public navCtrl: NavController){} 

    toDirectory(): any{ 
    this.navCtrl.push(Directory); 
    } 
} 

walkthrough.html

<ion-header class="opaque"></ion-header> 
<ion-content class="walkthroughBackground"> 
    <ion-col> 
     <ion-row> 
      <button class="clear-button-two" (click)="toDirectory()">Directory</button> 
     </ion-row> 
    <ion-col> 
</ion-content> 

उत्तर

8

यह अपेक्षित व्यवहार है। tabsHideOnSubPages:false डिफ़ॉल्ट व्यवहार है। यहाँ समस्या नहीं है। जब आप this.navCtrl.push(Directory); यह WalkThrough घटक के शीर्ष पर आता है। Directory टैब से अवगत नहीं है।

केवल Tabs पृष्ठ और उसके बच्चों को टैब के बारे में पता होगा। यहां आपने Tabs को NavController पर धक्का नहीं दिया है। तो एनवी सरणी इस [WalkThrough,Directory] की तरह दिखती है। इसके बजाय आपको [WalkThrough, Tabs(default: Directory)] की आवश्यकता है।

आपको टैब टैब को पुश करने की आवश्यकता है और <ion-tabs selectedIndex="1"> सेट करें। आप navParams का उपयोग कर सकते हैं ताकि यह निर्धारित किया जा सके कि कौन से इंडेक्स को चुना जाना है। यहाँ एक नकली है।

walkthrough।ts ->this.navCtrl.push(Tabs,{index: "1"});

tabs.ts ->index = navParams.get('index')

tabs.html -> नहीं किया <ion-tabs selectedIndex= {{index}} >

मैं इसे परीक्षण किया गया। आशा है कि यह आप के लिए काम करता है।

+0

आपका उत्तर सही है हालांकि आप {{}} टैबलेट.html में लगभग अनुक्रमणिका को भूल गए हैं! अच्छा काम। – rashadb

+1

@rashadb वैसे भी है जो साइड-मेन्यू से किसी पृष्ठ पर नेविगेट करने के लिए है जो आयन-टैब में से एक नहीं है और फिर भी टैब रखता है? –

संबंधित मुद्दे