Question

我正在研究Cordova / Ionic 2 / AngularJS项目，并且面临以下问题。我已经定义了5个带有相应视图的主导航选项卡，但是我有一个视图（该视图包含一个iFrame），我想从我的任何主选项卡中导航到该视图，问题是我需要保持活动选项卡处于选中状态< / p>

我的标签定义如下：

<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之前选择的主菜单标签。

>

这是我的问题，有没有一种方法可以根据参数动态设置视图？还是一个比我到目前为止的方法更实用的解决方案？

预先感谢您的帮助。

Answer 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);
    }
}

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

1 个答案: