Ionic 3 在应用程序模块问题中引用了一个新页面 [英] Ionic 3 refer a new page in app module issue

问题描述

我在 ionic 3 中使用 generate 命令生成了一个新页面.当我尝试将其添加到应用程序模块时，它会引发以下错误，

I generated a new page in ionic 3 using the generate command. When I try adding it to the app module it throws the following error,

Uncaught Error: Unexpected value 'NewTodo' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

以前在使用 ionic 2.x 时，我从未手动添加注释.知道如何解决吗?

Previously while using ionic 2.x I never added annotations manually. Any idea how I can resolve it?

更新

new-todo.ts 文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Data} from '../../providers/data';
import { ToastController } from 'ionic-angular';

@Component({
  selector: 'page-new-todo',
  templateUrl: 'new-todo.html',
})
class Todo { 
  public title: string; 
  public completed: boolean; 
  constructor() { 
    this.title = ''; 
    this.completed = false; 
  } 
}

export class NewTodo {
  todo: Todo;
  constructor(public navCtrl: NavController, public navParams: NavParams,public _data: Data,public toastCtrl: ToastController) {
    this.todo = new Todo();
  }

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

  save(){
    var key = this._data.save(this.todo);
    if(key){
      // console.log('saved');
      let toast = this.toastCtrl.create({
        message: '',
        duration: 3000
      });
      toast.onDidDismiss(() => {
        this.navCtrl.pop();
        console.log('toast dismissed');
      });
      // this.navCtrl.present(toast);
      toast.present();
    }
  }

}

app-module.ts 文件

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 { NewTodo } from '../pages/new-todo/new-todo';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpModule } from '@angular/http';
import { AngularFireModule } from 'angularfire2';
import {Data} from '../providers/data';
import * as firebase from 'firebase';
// AF2 Settings
export const firebaseConfig = {
  apiKey: "AIzaSyBiVsxqjSlsPpcHCzJi0anzInr2N9FLv5E",
  authDomain: "test-project-5f51f.firebaseapp.com",
  databaseURL: "https://test-project-5f51f.firebaseio.com",
  storageBucket: "test-project-5f51f.appspot.com",
  messagingSenderId: "341872568316"
};
// firebase.initializeApp(firebaseConfig)
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    NewTodo
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    NewTodo
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    [Data]
  ]
})
export class AppModule {}

UPDATE-2

new-todo.module.ts 文件

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { NewTodo } from './new-todo';

@NgModule({
  declarations: [
    NewTodo,
  ],
  imports: [
    IonicModule.forChild(NewTodo),
  ],
  exports: [
    NewTodo
  ]
})
export class NewTodoModule {}

推荐答案

在 ionic 3 中.每个页面默认设置为单独的模块，以实现 延迟加载页.

In ionic 3. Each page is by default setup as a separate module in order to implement lazy loading of pages.

您的页面将在 new-todo.module.ts 中声明.

Your page will be declared in new-todo.module.ts.

@NgModule({
    declarations: [
        NewTodo
    ],
    imports: [
        IonicPageModule.forChild(NewTodo)
    ],
    entryComponents: [
        NewTodo
    ]
})

查看 IonicPageModule 文档以及 IonicPage.

在您的组件 new-todo.ts 页面中，在组件装饰器上方添加 @IonicPage() 装饰器.

In your component new-todo.ts page, add the @IonicPage() decorator above the component decorator.

@IonicPage()
@Component({
  selector: 'page-new-todo',
  templateUrl: 'new-todo.html',
})

还删除页面模块之外的所有导入到此页面.在 NavController 中推送页面时，使用字符串 'NewTodo' 代替导入的类.您不必在 app.module.ts

Also remove all imports to this page outside of the page module. Use the string 'NewTodo' instead of the imported class when pushing the page in NavController. You dont have to declare the page in app.module.ts

这篇关于Ionic 3 在应用程序模块问题中引用了一个新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！