作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我使用 generate 命令在 ionic 3 中生成了一个新页面。当我尝试将它添加到应用程序模块时,它会抛出以下错误,
Uncaught Error: Unexpected value 'NewTodo' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
以前在使用 ionic 2.x 时我从未手动添加注释。知道我该如何解决吗?
更新
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 中。默认情况下,每个页面都设置为单独的模块,以实现 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',
templateUrl: 'new-todo.html',
})
此外,在页面模块之外删除对该页面的所有导入。在 NavController 中推送页面时,使用字符串 'NewTodo'
而不是导入的类。您不必在 app.module.ts
关于angular - Ionic 3 在应用程序模块问题中引用新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43339695/
我有一个包含几个模块的程序,比如:moduleA、moduleB 和 moduleC。 而且我还有一个头文件 debug_flags.h 我在其中定义了三个宏: #define DEBUG_MODUL
我是一名优秀的程序员,十分优秀!