导航到另一个视图时如何保持活动选项卡？答案

【问题标题】：How to keep the active tab while navigating to another view?导航到另一个视图时如何保持活动选项卡？
【发布时间】：2019-05-28 01:02:25
【问题描述】：

我正在开发一个 Cordova/Ionic 2/AngularJS 项目，我面临以下问题。我已经定义了 5 个带有相应视图的主导航选项卡，但是我有一个视图（这个包含一个 iFrame），我想从我的任何主选项卡导航到它，问题是我需要保持选中的活动选项卡

我的标签定义如下所示：

<ion-tabs ng-controller="BaseTabs as ctrl"
          class="tabs-icon-top tabs-color-active-positive"
          delegate-handle="tabs">

  <ion-tab title="Featured" icon="featured" ng-click="ctrl.openCatalog()"
           ui-sref="tab.app-catalog.featured" on-select="ctrl.update()">
    <ion-nav-view name="tab-app-home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Catalog" icon="shop" ng-click="ctrl.openCatalogSearch()" 
           ui-sref="tab.app-catalog-search" on-select="ctrl.update()">
    <ion-nav-view name="tab-app-catalog-search"></ion-nav-view>
  </ion-tab>

...

  <ion-tab title="More" icon="more" ng-click="ctrl.openMore()"
           ui-sref="tab.app-more-content" on-select="ctrl.update()">
    <ion-nav-view name="tab-app-user"></ion-nav-view>
  </ion-tab>

</ion-tabs>

在我的 iframe 控制器中，我有以下内容：

    $stateProvider.state(
      'tab.app-base-frame', {
        url    : '/base/frame:url',
        parent : 'tab',
        views  : {
          'tab-app-home' : {
            templateUrl  : 'templates/app/base/frame.html',
            controller   : 'BaseFrame',
            controllerAs : 'ctrl'
          }
        },
        params : {
          url   : ''
          title : false
        }
      }
    )

由于在控制器中我设置了视图 tab-app-home，因此每次打开 iframe 视图时，我都会选择主页选项卡，而不是在调用 iframe 之前处于活动状态的选项卡。 p>

所以这是我的问题，有没有办法根据参数动态设置视图？或者也许是一个更实际的解决方案，而不是我迄今为止所做的方式？

提前感谢您的帮助。

【问题讨论】：

标签： angularjs typescript cordova ionic2 angular-ui-router

【解决方案1】：

这是对我有用的解决方案：

import {Tabs} from “ionic-angular”;

@Page({
    template: <ion-tabs #paymentTabs [tabbarLayout]="tabBarLayout" 
    [selectedIndex]="tabsIndex" preloadTabs="false"> <ion-tab tabIcon="list-box" 
    tabTitle="Tab1" [root]="tab2"></ion-tab> <ion-tab tabIcon="list-box" 
    tabTitle="Tab2" [root]="tab2"></ion-tab> </ion-tabs>,
})
export class PaymentTab {
    @ViewChild(“paymentTabs”) paymentTabs: Tabs;

    constructor() {}

    ngAfterViewInit() {
        setTimeout(() => {
            console.log(“this.paymentTabs”);
            this.paymentTabs.select(1);
        }, 500);
    }
}

【讨论】：