angular – Ionic 3引用app模块问题中的新页面

发布时间：2020-12-17 17:56:57 所属栏目：安全来源：网络整理

导读：我使用generate命令在ionic 3中生成了一个新页面.当我尝试将其添加到app模块时,它会抛出以下错误, Uncaught Error: Unexpected value 'NewTodo' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation. 以前在使用离子2

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

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

以前在使用离子2.x时我从未手动添加注释.知道我怎么解决它？

UPDATE

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

解决方法

在离子3中.默认情况下,每个页面都设置为一个单独的模块,以便实现 lazy loading页面.

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

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

查看IonicPageModule文档以及IonicPage.

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

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

同时删除页面模块外部对此页面的所有导入.在NavController中推送页面时,使用字符串’NewTodo’而不是导入的类.你不必在app.module.ts中声明页面

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!