详细讲解组件

##详细讲解组件（新建页面、弹窗、导航）

此文件用于讲课的预习，大致的了解下要讲的内容。

>注：今天以新建一个弹窗的页面为例（新建页面，以弹窗的形式表现）

>新建一个页面之前已经讲过，分别是三个页面（ a.html，a.scss，a.ts）,这里同样也是。

1、在pages文件里新建文件夹test；

2、在test文件夹里新建三个文件test.html，test.scss，test.ts（注意里面的内容，绑定的东西，特别是.ts文件里，昨天已经讲了）；

>>

|--pages

|--test

|--test.html

|--test.scss

|--test.ts

>3、在入口处将test页面绑定进去

也就是在app.modules.ts中绑定新建的TestPage（这里的名字对应的test.ts类中的名字，自己起的）

（1）首先是导入文件：

import { TestPage } from '../pages/test/test';

（2）然后在declarations加入TestPage

（3）最后在entryComponents加入TestPage

4、在需要弹窗的页面绑定TestPage,这里我在home页面使用，所以我在home.ts绑定，

import { TestPage } from '../test/test';

然后在类声明中加入

openModal() {

let modal = this.modalCtrl.create(TestPage);

// ,{},{enableBackdropDismiss:false}

modal.present();

}

5、这个是已经将test页面作为弹窗绑定好了，只需要进行点击事件就行了

>注意：上面的步骤已经很详细了，这里简单补充下：

1、这里的弹窗是自定义的页面，而自定义页面是需要必不可少的三个文件的（以取名a为例：a.html,a.scss,a.ts）

2、ts的该有的包和类是必不可少的，还有scss中的名字

3、建文件的语句：ionic g page PageName

4、在导航中添加新的导航：

（1）同样的新建页面

（2）在app文件夹中的app.componeng.ts中将导航的名字和页面绑定进去。

例如：

--1、绑定页面import { LoginPage } from '../pages/login/login';

--2、添加导航：{ title:'Login',component:LoginPage}