ionic3 自定义按钮切换tabs页

我们一般切换页面，多数通过点击下面的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，上图