import {HelloIonicPage} from '../pages/hello-ionic/hello-ionic';
在 ionic app 中添加一个新的页面,需要做以下流程:
第一:在 src/pages 目录下,创建对应的目录,如: hello-ionic
第二:在目录中,新建与目录名称对应的 html, ts, scss 文件,如:hello-ionic.html, hello-ionic.scss, hello-ionic.ts
html 文件,是模板文件。
ts 文件,是定义选择器、模板路径,调用其他东西。作用是输出一个 page。
第三:在需要使用新增 page 的组件中,import 使用。如:需要在首页中使用,修改 app.component.ts 文件。
import {HelloIonicPage} from '../pages/hello-ionic/hello-ionic';
......
export class MyApp {
rootPage:any = HelloIonicPage,
....
}
第四:修改 app.module.ts 文件,对应需要配置项中,添加 HelloIonicPage
import {HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
@NgModule({
declarations: [
MyApp,
HomePage,
HelloIonicPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
HelloIonicPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
到此,就是完成了一个新增页面。