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,上图


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • core package 概要:Core是所有其他包的基础包.它提供了大部分功能包括metadata,templa...
    LOVE小狼阅读 2,653评论 0 3
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,453评论 0 10
  • 背景需求: 1.项目开发、测试、发布使用的后台发布接口均不一致,根据不同环境配置接口的host+port 2.全局...
    清流神渚阅读 6,364评论 2 5
  • 老妈说我和儿子把她拖累了,她本来不用这么辛苦的。的确是这样,我把爸妈拖累了。 什么都不想说,唯有努力赚钱吧! 把欠...
    春语chunyu阅读 198评论 0 0
  • 如果我忍耐过青涩 蜕变为一只可以自由飞行的鸟时 才发现 曾经的蜕变前的欢乐 却不常留在心间 如果穿过长长的黑夜,封...
    1颖阅读 195评论 0 0