ionic2
टैब का उपयोग करना

टिप्पणियों

चाइल्ड पेज से चयनित टैब को प्रोग्रामेटिक रूप से बदलें

आप इस काम कर रहे प्लंकर में पूर्ण कोड पर एक नज़र डाल सकते हैं ।

इस उदाहरण में मैं टैब (चाइल्ड पेज) और टैब कंटेनर (टैब को रखने वाले घटक) के अंदर के पृष्ठों के बीच संचार को संभालने के लिए एक साझा सेवा का उपयोग करता हूं। यद्यपि आप शायद इसे इवेंट्स के साथ कर सकते हैं, मैं साझा सेवा दृष्टिकोण को पसंद करता हूं क्योंकि यह समझना आसान है और जब एप्लिकेशन बढ़ना शुरू होता है तब भी मैंटेन करना पड़ता है।

TabService

import {Injectable} from '@angular/core';
import {Platform} from 'ionic-angular/index';
import {Observable} from 'rxjs/Observable';
 
@Injectable()
export class TabService { 
  
  private tabChangeObserver: any;
  public tabChange: any;

  constructor(private platform: Platform){
    this.tabChangeObserver = null;
    this.tabChange = Observable.create(observer => {
        this.tabChangeObserver = observer;
    });
  }
  
  public changeTabInContainerPage(index: number) {
    this.tabChangeObserver.next(index);
  }
}

तो मूल रूप से TabService केवल एक बनाता है Observable टैब कंटेनर यह की सदस्यता के लिए अनुमति देने के लिए, और यह भी वाणी changeTabInContainerPage() विधि है कि बच्चे पृष्ठों से बुलाया जाएगा।

फिर, प्रत्येक चाइल्ड पेज में (टैब्स के अंदर वाले) हम केवल एक बटन जोड़ते हैं और click इवेंट को उस तरीके से बांधते हैं जो सर्विस के लिए है:

Page1.html

<ion-content class="has-header">
    <h1>Page 1</h1>
    <button secondary (click)="changeTab()">Select next tab</button>
</ion-content>

Page1.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { TabService } from 'tabService.ts';

@Component({
  templateUrl:"page1.html"
})
export class Page1 {

  constructor(private tabService: TabService) { }

  public changeTab() {
    this.tabService.changeTabInContainerPage(1);
  }
}

और अंत में, TabsPage , हम केवल सेवा की सदस्यता लेते हैं, और फिर हम इस टैब को इस this.tabRef.select(index); साथ this.tabRef.select(index);

import { Component, ViewChild } from "@angular/core";
import { Page1 } from './page1.ts';
import { Page2 } from './page2.ts';
import { TabService } from 'tabService.ts'; 

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root: any = Page1;
  tab2Root: any = Page2;

  constructor(private tabService: TabService){
    this.tabService.tabChange.subscribe((index) => {
      this.tabRef.select(index);
    });
  }
}

कृपया ध्यान दें कि हमें ion-tabs तत्व में #myTabs जोड़कर टैब्स उदाहरण का संदर्भ मिल रहा है, और हम इसे @ViewChild('myTabs') tabRef: Tabs; साथ घटक से प्राप्त करते हैं @ViewChild('myTabs') tabRef: Tabs;

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2"></ion-tab>
</ion-tabs>

टैब का चयन करें

DOM का संदर्भ मिलने के बजाय आप आयन-टैब पर सेलेक्टइंडेक्स विशेषता का उपयोग करके टैब के इंडेक्स को बदल सकते हैं

HTML:

 <ion-tabs [selectedIndex]="tabIndex" class="tabs-icon-text" primary >
      <ion-tab tabIcon="list-box"   [root]="tabOne"></ion-tab>
      <ion-tab tabIcon="contacts"  [root]="tabTwo"></ion-tab>
      <ion-tab tabIcon="chatboxes"  [tabBadge]="messagesReceived" [root]="tabFive"></ion-tab> 
 </ion-tabs>

टीएस:

 import { Events} from "ionic-angular";

 export class tabs {
  public tabIndex: number;
  constructor(e: Events) {
    tabs.mySelectedIndex = navParams.data.tabIndex || 0;
    e.subscribe("tab:change", (newIndex) => this.tabIndex = newIndex);
  }
}

यदि आप इसे किसी अन्य नियंत्रक सेवा से बदलना चाहते हैं, तो आप एक घटना भेज सकते हैं:

e.publish("tab:change",2);