angular - Ionic2 - flikar försvinner varje gång jag trycker på en ny sida/komponent med navCtrl

Enligt min förståelse av Ionic-dokumentationen och frågor som: Hur behåller man fliken när man trycker på en ny sida?

Jag har korrekt gjort vad som är nödvändigt för att förhindra att min flikfält blir dold. För att vara tydlig, flikfältet visas korrekt när navigering startar på vilken fliksida som helst och du går till någon annan fliksida i stacken. När du använder en "push"-metod från en nav-controller eller modal-controller osv. försvinner flikfältet. Var gör jag fel?

I koden nedan landar personen på genomgången när appen laddas ner för första gången. Det finns en knapp som sedan tar dem till katalogen där en flikbar också bör finnas.

I det fall användaren redan har sett genomgången, ställs rot-sidan in på hemsidan, där flikfältet finns. Om användaren navigerar till katalogsidan från hemsidan med hjälp av flikfältet förblir flikfältet på plats, korrekt längst ned på sidan.

Enligt min förståelse kommer det att förhindra detta beteende att lägga till tabsHideOnSubPages:false i app.module.ts, men det gör det inte.

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>

flikar.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(){}
}

flikar.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>

genomgång.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);
  }
}

genomgång.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>

Svar #1

Detta är det förväntade beteendet. tabsHideOnSubPages:false är standardbeteendet. Det är inte problemet här. När du this.navCtrl.push(Directory); kommer det ovanpå WalkThrough-komponenten. Directory är inte medveten om flikarna.

Endast Tabs-sidan och dess barn kommer att vara medvetna om flikar. Här har du inte tryckt in Tabs i NavController. Så nav-arrayen ser ut så här [WalkThrough,Directory]. Istället behöver du [WalkThrough, Tabs(default: Directory)].

Du behöver trycka på fliksidan och ställa in <ion-tabs selectedIndex="1">. Du kan använda navParams för att skicka vilken index som behöver väljas. Här är en modell.

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

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

tabs.html -> <ion-tabs selectedIndex= {{index}} >

Jag har inte testat det. Hoppas det fungerar för dig.

Relaterade artiklar