2018-02-26-Ionic app-添加页面

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

到此,就是完成了一个新增页面。

你可能感兴趣的:(2018-02-26-Ionic app-添加页面)