ionic-framework - 离子编程选项卡人口

Question

我正在尝试为菜单的每个部分创建一个选项卡。

所以我有以下数据结构：

[
  { name: 'Wines', contents:[...] },
  { name: 'Ciders', contents: [...] },
  { name: 'Beers', contents:[...] }
]

我想要的是某种 ngFor，它会为上面数组中的每个元素生成一个选项卡。

我没有在网上看到任何关于此的内容，并且似乎无法自己解决。

有人对这个有经验么？

Answer 1

尝试这样的事情：

let tabs = [{name:'Wines', contents:[...]},
 {name:'Ciders', contents: [...]},
 {name:'Beers', contents:[...]}
];

<ion-tabs>
  <ion-tab *ngFor="let tab of tabs" [root]="tab.name"></ion-tab>
</ion-tabs>

如果tab.name页面有一个@IonicPage装饰器，其中类名等于name选项卡对象的属性，这应该可以工作。例子：

@IonicPage()
@Component({
  ...
})
export class MyPage {
}

然后tab.name必须是MyPage。

请注意，将字符串设置为选项卡的根是利用延迟加载来设置选项卡的根页面。因此，如果您不熟悉 ionic-team，您可能应该阅读以下文章：

• 第1部分
• 第2部分