将<ion-tab>添加到特定视图

Question

我是离子新人。我有一个名为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>

我希望第二页仅在此视图中加载选项卡 我怎么能这样做？

Answer 1

向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>

我为你创建了一个演示。找到它here