Question

当我尝试使用Tabs模块时，我收到错误：

＆＃13;

import { IonicPage, NavController, NavParams, Nav, App, MenuController, Tabs } from 'ionic-angular';
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  tabbar: any;
  constructor(private appGlobal:AppGlobal, tabs:Tabs) {
  //Error: Uncaught (in promise): Error: No provider for Tabs!
    console.log('tabs ', tabs); // namely need to get current tab instance
  }

＆＃13;

＆＃13; 即我需要获取当前标签实例。 NavController给出了同样的错误 app.component.ts给出了同样的错误请帮助

Answer 1

这不是Tabs在Ionic中工作的方式。这不是您可以在课堂上注入的服务。您应该查看Tabs组件的离子docs。

要获取当前选中的标签，您可以使用getSelected()方法返回当前有效的Tab：

您的模板：

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

相应的课程：

export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;

  ionViewDidEnter() {
    this.tabRef.select(2);
    console.log(this.tabRef.getSelected());
  }
}

Answer 2

您可以通过这种方式获取标签页。

在标签页中，在ViewChild中获取您的标签元素，如下所示：

@ViewChild('myTabs') tabRef: Tabs;

尝试获取选定标签后：

this.nav.getActive().component.tabRef.getSelected().root

这将为您提供页面

ionic 3将NavController / Tabs注入app.component.ts或tabs.ts

2 个答案: