来扯点ionic3[1] 创建一个新页面
目录
一个APP中最基本的元素可谓是页面了,所以当我们创建了一个新的APP后,就应该了解一下如何创建一个新页面。 创建一个页面组件在 ionic 中,页面是以组件(component)的形式存在的,每个页面都是一个独立的组件。我们现在需要建一个名为test的页面,我们现在pages文件夹下新建一个文件夹,并创建一以 .ts 结尾的同名文件。
在 test.ts 中添加第一部分代码 import { Component } from '@angular/core' @Component({ selector: 'page-test',template: `<h1>Hello World!</h1>` }) export class TestPage {} 在这几行代码中,我们只做了一件事情,就是声明了TestPage页面类:
简单了解装饰器我们发现在类的声明语句之前,有一串看似不明所以的代码。它就是Component装饰器,装饰器(decorator)在ES6中是以@开头的特殊的函数,可以动态地给类添加一些功能,在这里Component装饰器就会根据传入的配置对象,为页面类赋予创建页面视图的功能。 而这里Component并非凭空出现的,而是文件的第一行,通过import语句将其导入进来的。 import { Component } from '@angular/core' @angular/core是一个npm的模块,定义了angular的核心功能,你可以在node_modules目录下找到它。 我们在装饰器中配置了两个东西,selector和template:
<h1>Hello World!</h1>
在AppModule中注册页面APPModule位于 src/app 目录下的 app.module.ts中,APPModule是整个应用的根模块,它是一个大工厂,负责把所有我们要用的东西组装在一起。我们要把新添加的页面注册到根模块当中,这只需要简单的两步: import { AboutPage } from '../pages/about/about'; import { ContactPage } from '../pages/contact/contact'; import { HomePage } from '../pages/home/home'; import { TabsPage } from '../pages/tabs/tabs'; import { TestPage } from '../pages/test/test'; 主意from后面的地址是不需要加 .ts 扩展名的,如果在编辑器或IDE中安装了自动填充路径的插件,很容易误加后缀。 2.将TestPage分别加入declarations和entryComponents数组中: @NgModule({ declarations: [ ... TabsPage,TestPage ],... entryComponents: [ ... TabsPage,... 以说明TestPage是APP中需要用到的组件,而且是一个动态组件。 展现我们尚不知道如何从已有的页面中把test页打开,我们用一个笨办法来观察我们刚刚创建的页面,打开 pages/tabs/tabs.ts ,导入TestPage,并把 tab1Root 替换掉,让应用的首屏变成test页面。 ... import { TestPage } from '../test/test'; ... export class TabsPage { tab1Root = TestPage; ... 运行serve命令,打开本地服务器,得到了这样的界面
使用独立的模板文件我们得到的显然不是一个典型的APP页面,现在我们再test文件夹下新建test.html <ion-header> <ion-navbar> <ion-title> Test </ion-title> </ion-navbar> </ion-header> <ion-content> <h1>Hello World!</h1> </ion-content> 这一段HTML代码就是一个标准的ionic页面结构,很多标签都是ionic定制的,页面分为头部(ion-header)和主体(ionic-content)两个部分,头部包含了导航栏(ion-navbar)及标题(ion-title),而主体部分,就是我们自定义的内容。 回到test.ts,把刚才装饰器嵌入的模板代码 template: `<h1>Hello World!</h1>` 替换为引入独立模板文件的代码 templateUrl:'./test.html' 注意这里包裹路径的符号变成了单引号。 在发生改动之后,浏览器会自动刷新页面,此时我们看到了现在的页面: 总结至此我们完成了一个页面的创建,看似步骤有点多,但是熟练了以后这是一个非常快速的过程,总的说来一共就三步:
第二步和第三步实际上是可以顺序互换的。 下一章将会介绍页面之间的跳转,以及页面栈原理。 参考资料1.修饰器(ECMAScript6 入门) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- [webservices开发]XFire Web服务的单元测试
- angularjs – 在ui-grid中,ng-grid的“beforeSelectionChan
- Angular 5 – 使用对象进行表单控制
- The archive: /bin/bootstrap.jar which is referenced by
- angularjs – 如何动态创建具有某个类的角度的div?
- Bootstrap每天必学之缩略图与警示窗
- WebService、Ajax与回调函数(一)
- angularjs单向数据绑定,可以做角度吗?
- Thrift & avro
- 《数据结构》实验四: 字符串和多维数组 实验(实验报告)