ionic-framework - 如何在 ionic 3 中使用选项卡正确设置我的主应用程序?
问题描述
嗨,伙计们,我使用这个命令“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,然后将该 NgModule 导入 AppModule 和 TabsPageModule。错误:类型 TabsPage 是 2 个模块声明的一部分:AppModule 和 TabsPageModule!请考虑将 TabsPage 移动到导入 AppModule 和 TabsPageModule 的更高模块。您还可以创建一个新的 NgModule,它导出并包含 TabsPage,然后将该 NgModule 导入 AppModule 和 TabsPageModule。
它说我必须将我的标签页模块移高,这样做正常吗?还是我错过了什么?
解决方案
invalid link: TabsPage
This error thrown, because TabsPage isn't registered in module. There are two ways to register:
- If page is eager loaded:
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()
],
...
- If page will lazy load. Here for every page you create module.
Tip: Using ionic CLI no need to create page/page.modules manually. Simply run:
ionic g page TabsPage
. Result should be similar to:
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;
...
推荐阅读
- sql-server - 当 ASP 应用程序托管在 IIS Exress 中时,连接到 SQL 数据库有效,但在本地 IIS 中托管时无效
- javascript - JS return an array and an object from function
- laravel - 从 react native 上传图片到 laravel 服务器
- math - FIPY 求解与 ODE 耦合的 PDE
- java - Flowable.fromPublisher 需要一个 Publisher,那它为什么要接受一个 Subscriber?
- css - margin-left: auto 如何将元素向右对齐?
- reactjs - 用 jest 和酶的 useReducer 钩子的单元测试
- python - 从 s3 存储桶流式传输 json 文件
- python - 在列中的唯一值上为多列创建虚拟对象
- pandas - 基于四方信息的 folium 映射 pandas 数据框