我们一般切换页面,多数通过点击下面的tabs来切换,但是也有可能我不希望通过点击tabs来切换,比如,我在home页上有一个按钮。
我想点击首页上的这个按钮直接切换到搜索页上去,如果用NavController.setRoot(),NavController.push()是不行的,这两种方法会直接替换掉整个tabs页面,下面是我的做法:
我考虑通过一个共享服务来处理page页面和tabs之前的通信。当然,也可以通过Events事件来处理。https://ionicframework.com/docs/api/util/Events/
1、新建一个TabService.ts服务
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Platform } from 'ionic-angular';
@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);
}
}
2、home.html加一个button
3、home.ts增加一个changeTab方法
4、然后在tabs页面去接收这个可观察对象传来的的值
5、改一下tabs.html,加一个#myTabs
执行,一切OK,上图