大佬教程收集整理的这篇文章主要介绍了来扯点ionic3[1] 创建一个新页面,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
一个APP中最基本的元素可谓是页面了,所以当我们创建了一个新的APP后,就应该了解一下如何创建一个新页面。
在 ionic 中,页面是以组件(component)的形式存在的,每个页面都是一个独立的组件。我们现在需要建一个名为test的页面,我们现在pages文件夹下新建一个文件夹,并创建一以 .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位于 src/app 目录下的 app.module.ts中,APPModule是整个应用的根模块,它是一个大工厂,负责把所有我们要用的东西组装在一起。我们要把新添加的页面注册到根模块当中,这只需要简单的两步:
1.引入TestPage页面类,我们在文件的开头部分,加上相关的语句,如果你是个对代码整洁度有要求的人,你肯定是会加在已有的几个页面引入语句附近的:
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 入门)
2.模板字符串(ECMAScript6 入门)
以上是大佬教程为你收集整理的来扯点ionic3[1] 创建一个新页面全部内容,希望文章能够帮你解决来扯点ionic3[1] 创建一个新页面所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。