【Ionic】Ionic3基本接口架构解析

一、概述

一套完整的Ionic生态系统分为5个部分
1、html5，静态页面，这个不用多说；
2、scss，样式，这个也不多说
3、结合上面最近的一张图，他有一个app.module.ts文件，用来导入Module的，你可以理解为Java后端代码的导包工作；
4、app.component.ts表示前端的逻辑，可以理解为typeScript或者js逻辑控制层；
5、main.ts，这里一般命名未service.ts，专门用来和后端做交互的，去后端查询数据；app.component.ts如果要去后端查一个用户的记录，先调用main.ts里面的接口，main.ts再和后端交互，查询到数据后返回给app.component.ts
他们的逻辑关系如下：

二、几种常用的module组件

首先我们区分一个module和component概念，看了上面的图，你就知道了，module和component都是元件或者组件的意思，但是module要比component大一级，前者包含后者，为了区分，我们把module翻译为组件，component翻译为元件；；module像一个管理员一样或者接口一样，管理或者插入component；
这里，列举常用的三种module
1、系统组件：设置根页面组件

imports: [ RouterModule.forRoot(routes) ]

2、系统组件：分页组件

 imports: [IonicPageModule.forChild(LeaveListComponent)],

记得要导入Ionic的分页包

3、自定义组件
我们最常做的，就是自定义一个module，这个直接定义一个component.ts文件，定义一个module.ts，然后在module.ts里面引用这个component.ts元件即可；定义组件module要按照以下格式：

@NgModule({
  declarations: [LeaveListComponent],
  imports: [IonicPageModule.forChild(LeaveListComponent)],
  providers:  [LeaveService]
})

@NgModule表示你接下来要自定义一个组件（module）了；
1、declarations：用来声明管辖的Component；
2、Imports：引用到的其它的组件（Module）
3、providers:调用了哪些service文件去后台查询的service文件
4、bootstrap；表示装饰的是哪个元件（component）了

一般，第一个不可能没有；第二个，一般也不可少；第三个，如果没有要去后台查询，可以没有；第四个，也可以没有；这四个的顺序颠倒没有影响；