找不到AddDataPage的组件工厂

时间:2018-01-27 15:34:40

标签: ionic-framework ionic3

我正在努力学习离子。这是我的第一个申请。它给我一个错误: enter image description here

app.module.ts

import { AddDataPage } from './../pages/add-data/add-data';
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { SQLite } from '@ionic-native/sqlite';
import { Toast } from '@ionic-native/toast';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SQLite,
    Toast
  ]
})
export class AppModule {}

添加-data.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
import { Toast } from '@ionic-native/toast';

/**
 * Generated class for the AddDataPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-add-data',
  templateUrl: 'add-data.html',
})
export class AddDataPage {

  data = { date:"", type:"", description:"", amount:0 };

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private sqlite: SQLite,
    private toast: Toast) {}

    saveData() {
      this.sqlite.create({
        name: 'ionicdb.db',
        location: 'default'
      }).then((db: SQLiteObject) => {
        db.executeSql('INSERT INTO expense VALUES(NULL,?,?,?,?)',[this.data.date,this.data.type,this.data.description,this.data.amount])
          .then(res => {
            console.log(res);
            this.toast.show('Data saved', '5000', 'center').subscribe(
              toast => {
                this.navCtrl.popToRoot();
              }
            );
          })
          .catch(e => {
            console.log(e);
            this.toast.show(e, '5000', 'center').subscribe(
              toast => {
                console.log(toast);
              }
            );
          });
      }).catch(e => {
        console.log(e);
        this.toast.show(e, '5000', 'center').subscribe(
          toast => {
            console.log(toast);
          }
        );
      });
    }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddDataPage');
  }

}

我真的很想学习这个框架,但我在youtube上看到的大多数教程都是针对离子2的。如果我下载的离子版本与我在教程中看到的不同,那就更难学了。特别是如果你是新的。希望你能帮忙。谢谢。

1 个答案:

答案 0 :(得分:0)

由于错误非常清楚,您必须在声明内部以及在条目组件内部添加您创建并使用离子(如果您不使用延迟加载)的每个页面,因此只需在声明和条目中添加您的页面AddDataPage组件部分

在@ngModule里面的app.module.ts中:

declarations: [ 
  MyApp,
  HomePage, 
  AddDataPage
], 

在entryComponents里面

entryComponents: [
  MyApp,
  HomePage,
  AddDataPage
]