Изменить ion-tabs selectedIndex со вступительной / вступительной страницы

Question

Я создал вступительную страницу, которая содержит 3 слайда, которые будут служить инструкцией по использованию сайта. последний слайд содержит две кнопки

Это то, что я пытаюсь достичь

• Кнопка входа в систему - должна открывать tabsPage с активной вкладкой входа
• Кнопка регистрации - должна открывать tabsPage с активной вкладкой регистрации.

intro.html

<ion-content>
  <ion-slides #mySlider pager (ionSlideDidChange)="onSlideChange()" [class]="activeSlide">
    <ion-slide *ngFor="let slide of slides">
      <img [src]="slide.image">
      <div class="caption">
        <h2>{{slide.title}}</h2>
        <p>{{slide.description}}</p>
      </div>
      <div class="userNav" *ngIf="activeSlide == 'slideBG2'">
          <button ion-button   (click)="goToSignup() ">signup</button>
          <button ion-button   (click)="goToLogin() ">Login</button>
      </div>

    </ion-slide>
  </ion-slides>
  <button *ngIf="activeSlide !== 'slideBG2'" class="nextSlide" (click)="goToSlide()">Next</button>
</ion-content>

intro.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
import { SignupPage } from '../signup/signup';
import { LoginPage } from '../login/login';


@IonicPage()

@Component({
  selector: 'page-intro',
  templateUrl: 'intro.html',
})

export class IntroPage {
  introSlides: any;
  splash = true;


  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

@ViewChild('mySlider') slider: Slides;
  public currentindex
  public objectindex
  public activeSlide = 'slideBG0';


slides = [
{
  title: "Juce up your life",
  description: "lorem",
  image: "assets/imgs/intro/slides/slide1.png",
},
{
  title: "Anytime, anywhere",
  description: "lorem",
  image: "assets/imgs/intro/slides/slide2.png",
},
{
  title: "Get started",
  description: "lorem.",
  image: "assets/imgs/intro/slides/slide3.png",
}
];


public onSlideChange() {
  this.currentindex = this.slider.getActiveIndex();
  this.activeSlide = 'slideBG' + this.currentindex;
  // console.log(this.activeSlide);
} 
goToSlide() {
  let currentIndex = this.slider.getActiveIndex() + 1;
  this.slider.slideTo(currentIndex, 500);
}

goToLogin() {
  // this.navCtrl.setRoot(LoginPage);
}
goToSignup(): void  {
  // this.navCtrl.setRoot(TabsPage, {index: 1});
}

  ionViewDidLoad() {
    // console.log(this.introSlides);
    setTimeout(() => {
      this.splash = false;
    }, 4000);
  }

}

tabs.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { SignupPage } from '../signup/signup';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = SignupPage;
  tab2Root = LoginPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }
}

tabs.html

<ion-tabs tabsPlacement="top" [selectedIndex]="seltabix">
  <ion-tab [root]="tab1Root" tabTitle="Signup"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Login"></ion-tab>
</ion-tabs>

app.component.ts

export class MyApp {
  rootPage:any = IntroPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Answer 1

Исправлена

intro.ts

goToLogin() {
  this.navCtrl.setRoot(TabsPage, {
    tabIndex: 1
  });
}
goToSignup()  {
  this.navCtrl.setRoot(TabsPage, {
    tabIndex: 0
  });
}

tabs.ts

export class TabsPage {

  tab1Root = SignupPage;
  tab2Root = LoginPage;
  seltabix: number;


  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.seltabix = this.navParams.get('tabIndex');
  }
}

tabs.html

<ion-tabs tabsPlacement="top" [selectedIndex]="seltabix">
  <ion-tab [root]="tab1Root" tabTitle="Signup"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Login"></ion-tab>
</ion-tabs>

intro.html

<div class="userNav" *ngIf="activeSlide == 'slideBG2'">
          <button ion-button   (click)="goToSignup() ">signup</button>
          <button ion-button   (click)="goToLogin() ">Login</button>
      </div>

Передача данных между страницами Сначала я передаю данные в вызове setRoot (это также может быть сделано при использовании push

  goToLogin() {
  this.navCtrl.setRoot(TabsPage, {
    tabIndex: 1
  });
}
goToSignup()  {
  this.navCtrl.setRoot(TabsPage, {
    tabIndex: 0
  });
}

Затем на принимающей странице импортируйте NavParams и вставьте его в конструктор, а затем установите данные с 1-й страницы в свойство индекса выбранной вкладки.

constructor(private navCtrl: NavController, private navParams: NavParams){
 this.seltabix = this.navParams.get('tabIndex');
}