Ich erstelle eine ionische Anwendung, in der ich Registerkarten verwende. Ich möchte mit der an die Registerkartenvorlage angehängten Typoskript-Komponentenklasse von einer Registerkarte zur anderen navigieren können. Beispielsweise sollte Tab 2 beim Auslösen eines Ereignisses in Tab 1 aktiviert werden.

Meine Registerkarte wird gut in die Registerkarten geladen und alles ist gut, solange ich manuell auf die Registerkarte klicke, um mich zu bewegen, aber der Versuch, den Kontext im Code dahinter zu ändern, war sehr schwierig.

Zum Zeitpunkt des Ladens kann ich eine der Registerkarten aktivieren, indem ich einfach das Attribut [selectedIndex] der Ion-Registerkarten auf den Wert eines Attributs in meiner Registerkartenkomponenten-Klasse setze.

Tabs Parent Template - tab.html

<ion-tabs #tabParent [selectedIndex]="tabToShow">
  <ion-tab tabTitle="Tab 1" [root]="tab2" [rootParams]="{parent : tabParent}"></ion-tab>
  <ion-tab tabTitle="Tab 2" [root]="tab2" [rootParams]="{parent : tabParent}></ion-tab>
  <ion-tab tabTitle="Tab 3" [root]="tab3" [rootParams]="{parent : tabParent}></ion-tab>
</ion-tabs>

Component - tab.ts

import {Page} from 'ionic-angular';
import {Tab1} from '../tab1/tab1.ts';
import {Tab2} from '../tab2/tab2.ts';
import {Tab3} from '../tab3/tab3.ts';

@Page({
templateUrl : 'build/pages/tab/tab.html'
})

export class Tab{

tab1: any;
tab2: any;
tab3: any;

tabToShow : number = 1;

ngOnInit(){
 this.tab1 = Tab1;
 this.tab2 = Tab2;
 this.tab3 = Tab3;
 }

}

In der Komponente für die erste Registerkarte Tab1) kann ich mit @ einen Verweis auf die übergeordneten Registerkarten erhalt[rootParams] = "{parent : tabParent}" und ich kann auf alle verfügbaren Eigenschaften zugreifen, die vom tabs-Objekt verfügbar gemacht werden. Ein Ereignis, das in der Vorlage tab1.html generiert wird, verursacht dasgoToTab2() heißen. Also konnte ich @ setzSelectedIndex zu 1 (was ich erwarte, um die aktive Registerkarte auf die zweite Registerkarte zu ändern). Die Registerkarte ändert sich jedoch nicht.

tab1.ts

import {Page, NavParams} from 'ionic-angular';
import {Tab2} from '../tab/tab2/tab2.ts'

@Page({
 templateUrl : 'build/pages/tab/tab1/tab1.html'
})

export class Tab1{

parent : any;

constructor(nav : NavParams){
this.parent = nav.data;
}

goToTab2(event, value): void{
 this.parent.parent.selectedIndex = 1;
 console.log(this.parent.parent);
 }

}

Ich brauche Hilfe, was mache ich falsch?