You are here

ionic3, 新增一个页面

作者: 老葛 亚艾元软件

添加的页面需要注册,新建了一个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);

  }

}


论坛:

Drupal版本: