离子2中的动态离子标签使用ngFor

时间:2017-04-07 07:33:25

标签: typescript tabs ionic2

我正在使用离子2作为我的应用程序,我想在我的应用程序中获得动态标签,我无法得到它

HTML

<ion-tabs #mainTabs [selectedIndex]="mySelectedIndex">
  <ion-tab *ngFor="let circle of circles" [tabRoot]="gotoMemberListPage(circle)" title="{{circle.name}}"></ion-tab>\
</ion-tabs>

打字稿

gotoMemberListPage(circle) {
 this.navCtrl.push(MemberListPage, circle);
}

1 个答案:

答案 0 :(得分:1)

我不知道它是否会对你有所帮助 通过下面的代码片段,您可以使用Ionic 2和typescript

传递动态标签

<强> tabs.html

<ion-tabs>
 <ion-tab *ngFor="let tab of tabs" [root]="tab.root" [tabTitle]="tab.title" 
  [tabIcon]="tab.icon"></ion-tab>
</ion-tabs>

<强> tabs.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
 templateUrl: 'tabs.html'
})
export class TabsPage {
public tabs;
public navCtrl: NavController
constructor() {
this.tabs = [
  { title: "Home", root: HomePage, icon: "home" },
  { title: "About", root: AboutPage, icon: "information-circle" },
  { title: "Contact", root: ContactPage, icon: "contacts" }
];

}
}