Ionic2更改选中子页面中的selectedIndex属性 [英] Ionic2 change Tabs selectedIndex property from a childpage
问题描述
我是Angular2和Ionic2的初学者。我正在尝试使用Ionic2的Tabs组件构建我自己的小应用程序。
我希望能够使用子页面中的按钮更改选项卡。我尝试使用 NavController.setRoot（）和 NavController.push（），但它们都没有所需的行为。
setRoot（Homepage）设置正确的视图，但不更改选项卡菜单中的选定选项卡。
push（Homepage）设置正确的视图，但Tabs菜单不再可见。
I我有点困惑的是我应该如何与单页面中的TabsPage（保存标签的@Component）进行通信。
谢谢！
嗯，应该有一种更简单的方法来做到这一点，但我是这样做的：
因为要更改活动选项卡，您应该从选项卡组件中执行此操作，我使用共享服务来处理选项卡中的页面和<之间的通信em>标签容器（包含标签的组件）。即使您可能使用活动，我也喜欢共享服务方法，因为它更容易理解，也可以在应用程序开始增长时保持一致。
所以基本上 TabServices 只创建一个 Observable 到允许标签容器订阅它，并声明将从标签页调用的 changeTabInContainerPage（）方法。
从'@ angular / core'导入{Injectable};
从'ionic-angular / index'导入{Platform};来自'rxjs / Observable'的
import {Observable};
@Injectable（）
导出类TabService {
private tabChangeObserver：any;
public tabChange：any;
构造函数（私有平台：平台）{
this.tabChangeObserver = null;
this.tabChange = Observable.create（observer => {
this.tabChangeObserver = observer;
}）;
}
public changeTabInContainerPage（index：number）{
this.tabChangeObserver.next（index）;
}
}
然后，在每个页面（里面）选项卡）我们只添加一个按钮并将其绑定到调用服务的方法：
Page1.html
< ion-content class =has-header>
< div padding style =text-align：center;>
< h1> Page 1< / h1>
< button secondary（click）=changeTab（）>选择下一个标签< / button>
< / div>
< / ion-content>
Page1.ts
从'@ angular / core'导入{Component};来自'rxjs / Observable'的
import {Observable};来自'tabService.ts'的
import {TabService};
@Component（{
templateUrl：page1.html
}）
导出类Page1 {
构造函数（私有tabService： TabService）{}
public changeTab（）{
this.tabService.changeTabInContainerPage（1）;
}
}
最后，在标签组件中，我们只订阅到服务中的方法，然后我们用 this.tabRef.select（index）;
<更改所选标签pre>
从@ angular / core导入{Component，ViewChild};来自'./page1.ts'的
import {Page1};来自'./page2.ts'的
import {Page2};来自'tabService.ts'的
import {TabService};
@Component（{
templateUrl：'tabs.html'
}）
导出类TabsPage {
@ViewChild（'myTabs '）tabRef：标签;
tab1Root：any = Page1;
tab2Root：any = Page2;
构造函数（私有tabService：TabService）{
this.tabService.tabChange.subscribe（（index）=> {
this.tabRef.select（index）;
}）;
}
}
请注意我们正在获取对 Tabs 实例，在 ion-tabs 中添加 #myTabs 元素，我们从组件中获取 @ViewChild（'myTabs'）tabRef：Tabs;
< ion-tabs＃myTabs>
< ion-tab [root] =tab1RoottabTitle =Tab 1>< / ion-tab>
< ion-tab [root] =tab2RoottabTitle =Tab 2>< / ion-tab>
< / ion-tabs>
I'm kind of a beginer in Angular2 and Ionic2. I am trying to build my own small app using Ionic2's Tabs component.
I want to be able to change the tab using a button in my childpage. I have tried using NavController.setRoot() and NavController.push() but none of them have the desired behaviour.
setRoot(Homepage) sets the correct view but doesn't change the selected tab in the tab menu.
push(Homepage) sets the correct view but the Tabs menu is not visible anymore.
I am a bit confused about how should I comnunicate with the TabsPage (the @Component that holds the tabs) from my single pages.
Thanks!
Well, there should be an easier way to do this, but I did it this way:
Because in order to change the active tab you should do it from the Tabs Component, I used a shared service to handle the communication between the pages inside the tab and the tab container (the component that holds the tabs). Even though you probably could do it with Events I like the shared service approach because is easier to understand and also to mantain when the applications start growing.
So basically the TabServicesonly creates an Observable to allow the tabs container to subscribe to it, and also declares the changeTabInContainerPage() method that will be called from the tab pages.
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);
}
}
Then, in each page (inside the tabs) we only add a button and bind that to a method that calls the service:
Page1.html
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Page 1</h1>
<button secondary (click)="changeTab()">Select next tab</button>
</div>
</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);
}
}
And finally, in the tabs component, we only subscribe to the method in the service, and then we change the selected tab with 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);
});
}
}
Please notice that we're getting a reference to the Tabs instance by adding #myTabs in the ion-tabs element, and we get it from the component with @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>
这篇关于Ionic2更改选中子页面中的selectedIndex属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
