добавлятьк конкретному виду - PullRequest
0 голосов
/ 10 июня 2018

Я новичок в ионике.У меня есть компонент с именем firstPage, у него нормальное представление HTML.

<ion-header>
  <ion-navbar >
    <ion-title align="center">first.</ion-title>
  </ion-navbar>
</ion-header>
  <button ion-button
          block
          color="primary"
          [navPush]="second">
    Ir página 2 navPush.
  </button>
</ion-content>

import { Component } from '@angular/core';
import {  NavController, NavParams } from 'ionic-angular';
import { secondPage} from '../index.paginas';

@Component({
  selector: 'page-first',
  templateUrl: 'first.html',
})
export class firstPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  second:any=secondPage;
}

, а у меня есть другой компонент с именем secondPage.

<ion-header>
  <ion-navbar>
    <ion-title align-title="center">second</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  esta es la segunda XDDD
  <button ion-button block color="primary" navPop>back</button>
  <!--<page-tabs></page-tabs>-->
</ion-content>

import { Component } from '@angular/core';
import {  NavController, NavParams } from 'ionic-angular';
import { firstPage, Tab1Page,Tab2Page} from '../index.paginas';

@Component({
  selector: 'page-second',
  templateUrl: 'second.html',
})
export class secondPage {
 Tab1Page,Tab2Page // are the component that has html and .ts
 tab1: any;
 tab2: any;

 constructor() {
  this.tab1 = Tab1Page;
  this.tab2 = Tab2Page;
 }

}

firstPage имеет кнопку для прямого перехода к secondPage, но я хочу, чтобы SecondPage содержал:

<ion-tabs color="primary" selectedIndex="1">
   <ion-tab tabIcon="hammer" tabTitle="Tab2" [root]="tab1">tab1</ion-tab>
   <ion-tab tabIcon="hammer" tabTitle="Tab1" [root]="tab2">tab2</ion-tab>
</ion-tabs>

Я хочу, чтобы вторая страница загружала вкладкитолько в этом виде, как я могу это сделать?

enter image description here

1 Ответ

0 голосов
/ 10 июня 2018

Добавьте вкладки к second-page.html.

<ion-tabs color="primary" selectedIndex="1">
   <ion-tab tabIcon="hammer" tabTitle="Tab2" [root]="tab1"></ion-tab>
   <ion-tab tabIcon="hammer" tabTitle="Tab1" [root]="tab1"></ion-tab>
</ion-tabs>

Ваш класс SecondPage.ts в порядке.Единственное, что вам нужно сделать, это добавить приведенный ниже код к вашему html, который связан с вашим Tab2Page.ts.

<ion-content padding>
  esta es la segunda XDDD
  <button ion-button block color="primary" navPop>back</button>
</ion-content>

Я создал демо для вас.найди его здесь

...