Question

在离子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":[]}]

Answer 1

您可以通过设置索引到页面并使用离子标签中的“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>

希望有所帮助

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

1 个答案: