Ionic 2 - 使用 root 动态链接标签页答案

【问题标题】：Ionic 2 - Link tab page dynamically using rootIonic 2 - 使用 root 动态链接标签页
【发布时间】：2017-06-28 06:57:02
【问题描述】：

在 ionic 2 中，我可以通过以下代码使用 JSON 响应动态创建选项卡。我需要在

中使用 [root] 动态地将创建的选项卡与其相应的页面动态链接

    <ion-tab *ngFor="let rew of people" [tabTitle]="rew.name"></ion-tab>

tabs.ts

export class TabsPage {

public people: any;
public result: String;
public pep: any;
public tabs : any;

 tab1Root = HomePage;
 constructor(public navCtrl: NavController, public peopleSearch: PeopleSearch) {
 this.loadPeople();   
 }

 loadPeople() {

this.peopleSearch.load()
    .then(data1 => { 
      this.people = data1.children[0].children

      var result =JSON.stringify(this.people);
                console.log("Tabs : ",result);

     }
    );
  }
}

JSON 响应

  Tabs :  [{"category_id":5,"parent_id":2,"name":"Masala Mix","is_active":1,"position":1,"level":2,"children":[]},{"category_id":3,"parent_id":2,"name":"Pure spices","is_active":1,"position":2,"level":2,"children":[]},{"category_id":6,"parent_id":2,"name":"Pickles","is_active":1,"position":3,"level":2,"children":[]},{"category_id":8,"parent_id":2,"name":"Rice Mix","is_active":1,"position":4,"level":2,"children":[]},{"category_id":4,"parent_id":2,"name":"Asafoetida","is_active":1,"position":5,"level":2,"children":[]},{"category_id":9,"parent_id":2,"name":"Pappad","is_active":1,"position":6,"level":2,"children":[]},{"category_id":11,"parent_id":2,"name":"Become A Stockist ","is_active":1,"position":7,"level":2,"children":[]}]

【问题讨论】：

标签： json angular typescript ionic-framework ionic2

【解决方案1】：

您可以通过为页面设置索引并使用 ion-tabs 中的 'selectedIndex' 选择标签来做到这一点，

<ion-tabs selectedIndex={{index}}>
   <ion-tab [root]="tab1Root" tabTitle="PageOne"></ion-tab> // 0 activates this page
   <ion-tab [root]="tab2Root" tabTitle="PageTwo"></ion-tab> // 1 activates this page
   <ion-tab [root]="tab3Root" tabTitle="PageThree"></ion-tab> // 2 activates this page
</ion-tabs>

希望有帮助

【讨论】：