##详细讲解组件(新建页面、弹窗、导航)
此文件用于讲课的预习,大致的了解下要讲的内容。
>注:今天以新建一个弹窗的页面为例(新建页面,以弹窗的形式表现)
>新建一个页面之前已经讲过,分别是三个页面( 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}
网友评论