How to keep the active tab while navigating to another view? - angularjs

Question

I'm working on a Cordova/Ionic 2/AngularJS project and I'm facing the following issue. I have defined 5 main navigation tabs with the corresponding views, but I have one view (this one contains an iFrame), which I want to navigate to from any of my main tabs, the problem is I need to keep the active tab selected
My tabs definition look like this:
<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>
in my iframe controller I have the following:
$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
}
}
)
Since in the controller I have the views set tab-app-home, each time I open the iframe view I get the home tab selected instead of the one active before invoking the iframe.
So here is my question, is there a way to dynamically set the view based on parameters? Or maybe a more practical solution rather than the way I have done so far?
Thanks in advance for the help.

Answer 1

This is the solution that worked for me:
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);
}
}