Ionic 3引用app模块问题中的新页面 [英] Ionic 3 refer a new page in app module issue

问题描述

我使用generate命令在ionic 3中生成了一个新页面。当我尝试将其添加到app模块时，它会抛出以下错误，

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.

以前使用离子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 file

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 file

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 {}

推荐答案

在离子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 docs as以及 IonicPage 。

Check out IonicPageModule docs as well as 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引用app模块问题中的新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！