作者： 老葛 亚艾元软件
添加的页面需要注册，新建了一个item2页面，从list2页面导航过来，报错：
Typescript Error
Cannot find name 'Item2Page'.
D:/adt/phonegap/myionicproject/src/pages/list2/list2.ts
itemTapped(event, item) {
this.navCtrl.push(Item2Page, {
item: item
Ionic Framework: 3.6.0
Ionic App Scripts: 2.1.3
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.2
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36
需要向list2.ts文件中添加以下代码：
import { Item2Page } from '../item2/item2';
错误消失后，从list2页面，通过页面点击进入这个item2页面，报下面的错误：
Error: Uncaught (in promise): Error: No component factory found for Item2Page. Did you add it to @NgModule.entryComponents? Error: No component factory found for Item2Page. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (http://localhost:8100/build/vendor.js:3682:34) at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:8100/build/vendor.js:3700:15) at CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:8100/build/vendor.js:3742:87) at DeepLinker.resolveComponent (http://localhost:8100/build/vendor.js:20838:20) at NavControllerBase._viewInit (http://localhost:8100/build/vendor.js:43508:62) at http://localhost:8100/build/vendor.js:43303:23 at t.invoke (http://localhost:8100/build/polyfills.js:3:9283) at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:9223) at r.run (http://localhost:8100/build/polyfills.js:3:4452) at c (http://localhost:8100/build/polyfills.js:3:13535) at Object.reject (http://localhost:8100/build/polyfills.js:3:12891) at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:43269:16) at NavControllerBase._failed (http://localhost:8100/build/vendor.js:43257:14) at http://localhost:8100/build/vendor.js:43312:59 at t.invoke (http://localhost:8100/build/polyfills.js:3:9283) at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:9223) at r.run (http://localhost:8100/build/polyfills.js:3:4452) at http://localhost:8100/build/polyfills.js:3:14076
按照提示,需要在app.module.ts文件中，添加以下代码：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { List2Page } from '../pages/list2/list2';
import { Item2Page } from '../pages/item2/item2';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
Item2Page,
ListPage,
List2Page
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
Item2Page,
ListPage,
List2Page
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
如果想要将页面，添加到menu里面，还需要修改app.component.ts文件：
import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
import { List2Page } from '../pages/list2/list2';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen
) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage },
{ title: '列表', component: List2Page }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
