如何在ionic 3中正确使用选项卡将root设置为我的主应用程序？

debugcn 发表于 Dev

柯文

嗨，伙计们，我只是使用此命令“ionic start helloWorld tabs”启动一个项目，它生成选项卡式项目，然后我添加一个按钮以推送到一个新页面，这是我有一个按钮我想回到我的主应用程序，这里是我如何编程新页面按钮

新页面.ts

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

在我保存一个项目后，我想回到我的主要应用程序，我对我的 TabsPage 执行 setRoot，但我向我显示了这个错误

无效链接：TabsPage

这是我的 tabs.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 回答选项二更新我的代码后更新，我收到这些错误：

错误：未捕获（承诺）：错误：类型 TabsPage 是 2 个模块声明的一部分：AppModule 和 TabsPageModule！请考虑将 TabsPage 移至导入 AppModule 和 TabsPageModule 的更高模块。您还可以创建一个新的 NgModule 来导出并包含 TabsPage，然后在 AppModule 和 TabsPageModule 中导入该 NgModule。错误：类型 TabsPage 是 2 个模块声明的一部分：AppModule 和 TabsPageModule！请考虑将 TabsPage 移至导入 AppModule 和 TabsPageModule 的更高模块。您还可以创建一个新的 NgModule 来导出并包含 TabsPage，然后在 AppModule 和 TabsPageModule 中导入该 NgModule。

它说我必须将我的 tabpagemodule 移到更高的位置，这样做是否正常？或者我错过了什么？

耶肯

无效链接：TabsPage

抛出此错误，因为 TabsPage 未在模块中注册。有两种注册方式：

如果页面急切加载：

app.module.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 无需手动创建 page/page.modules。只需运行：ionic g page TabsPage。结果应类似于：

tabs.module.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 { }

tabs.ts：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。