代码之家 › 专栏 › 技术社区 › Ke Vin

如何在ionic 3中使用选项卡正确设置我的主应用程序的根目录?

tabpage ionic3 tabs ionic2 ionic-framework

0

Ke Vin · 技术社区 · 7 年前

大家好,我正在使用这个命令“ionic start helloWorld tabs”启动一个项目它生成了选项卡式项目,然后我添加了一个按钮来推到一个新页面,我有一个按钮想返回到我的主应用程序,下面是我如何编程新页面按钮

新建页面。ts

  addItem(item: Item) {
    this.shopping.addItem(item).then(ref =>{
      this.navCtrl.setRoot('TabsPage', {key : ref.key});
    })
  }

保存项目后,我想返回到我的主应用程序,我对我的选项卡页执行setRoot,但我显示了此错误

无效链接:选项卡页

这是我的标签。ts

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

我错过了什么?我应该导航到tabspage类,对吗?

更新在我用@Yerkon answer更新选项二的代码后,我得到以下错误:

错误:未捕获(承诺中):错误:类型选项卡页是两个模块的声明:AppModule和TabsPageModule!请考虑将选项卡页移动到导入AppModule和 TabsPageModule。您还可以创建一个新的NgModule,用于导出和包括选项卡页,然后在AppModule中导入该NgModule,并 TabsPageModule。错误:类型TabsPage是2声明的一部分模块:AppModule和TabsPageModule!请考虑移动选项卡页到导入AppModule和TabsPageModule的更高模块。你可以同时创建一个新的NgModule,导出并包含TabsPage,然后在AppModule和TabsPageModule中导入该NgModule。

它说我必须将tabpagemodule移到更高的位置,这样做正常吗?还是我错过了什么?

1 回复 | 直到 7 年前

1

Yerkon 7 年前

无效链接:选项卡页

引发此错误,因为TabsPage未在模块中注册。有两种注册方式:

如果页面为 渴望已加载 :

应用程序。单元ts:

@NgModule({
  declarations: [
    ConferenceApp,
    AboutPage,
    AccountPage,
    LoginPage,
    MapPage,
    PopoverPage,
    SchedulePage,
    ScheduleFilterPage,
    SessionDetailPage,
    SignupPage,
    SpeakerDetailPage,
    SpeakerListPage,
    TabsPage,
    TutorialPage,
    SupportPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(ConferenceApp, {}, {
      links: [
        { component: TabsPage, name: 'TabsPage', segment: 'tabs-page' },
         ...
      ]
    }),
    IonicStorageModule.forRoot()
  ],
...

如果页面将 惰性负载 。此处为您创建的每个页面模块。提示:使用ionic CLI无需创建页/页。手动模块。简单运行: ionic g page TabsPage .结果应类似于:

选项卡。单元ts:

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { IonicPageModule } from 'ionic-angular';

import { TabsPage } from './tabs';

@NgModule({
  declarations: [
    TabsPage,
  ],
  imports: [
    IonicPageModule.forChild(TabsPage),

  ],
  exports: [
    TabsPage
  ]
})
export class TabsPageModule { }

选项卡。ts:

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root: any = Tab1Root;
  tab2Root: any = Tab2Root;
  tab3Root: any = Tab3Root;
...