Open JerryMissTom opened 6 years ago
我们的APP肯定不是只有一个界面,这就需要了解ionic的内部导航的用法了。在ionic介绍这一章节提到,ionic实现了适合移动端开发的堆栈式导航系统,通过简单的push和pop实现界面的跳转和传值。ionic中界面分两种,懒加载界面和非懒加载的,所以这篇我们分两个部分来讲解,最后会介绍下懒加载界面和非懒加载界面的区别。
push
pop
还是使用之前的项目,根目录下通过ionic serve运行我们的项目
ionic serve
根目录下,通过ionic generate page lazy-load(关于此命令的更多解释见文章最后)创建一个懒加载界面,会在src/pages目录下新建一个文件夹,里面包含四个文件。如下:
ionic generate page lazy-load
src/pages
── pages │ ... │ └── lazy-load │ ├── lazy-load.html │ ├── lazy-load.module.ts │ ├── lazy-load.scss │ └── lazy-load.ts
下面开始从home页跳转到LazyLoad界面,首先在home页添加button按钮,并绑定点击跳转的事件,代码如下:
home
LazyLoad
button
home.html ... <button class="btn-primary" (click)="toLazyLoadPage()">跳转到懒加载界面</button>
home.ts ... toLazyLoadPage() { this.navCtrl.push('LazyLoadPage', { name: 'ionic', age: 18 }); }
解释一下:NavController是ionic导航的核心,它提供了push()操作可以跳转并传值至其他界面,this.navCtrl.push(page:string,params:object)中第一个参数是懒加载界面的名字,是string类型,第二个是传给下一个界面的参数,是Object类型。懒加载界面的名字是lazy-load.ts中导出的类的名字。
NavController
ionic
push()
this.navCtrl.push(page:string,params:object)
string
Object
lazy-load.ts
下面我们开始在懒加载界面中接收数据,代码如下(ionic创建界面时自动生成的注释可以删除):
lazy-load.html <ion-header> <ion-navbar> <ion-title>lazy-load</ion-title> </ion-navbar> </ion-header> <ion-content padding> <p>name:{{name}}</p> <p>age:{{age}}</p> <button (click)="back()">返回上一界面</button> </ion-content>
lazy-load.ts ... export class LazyLoadPage { name:string; age:number; constructor(public navCtrl: NavController, public navParams: NavParams) { this.name=this.navParams.get('name'); this.age=this.navParams.get('age'); } back(){ this.navCtrl.pop(); } ... }
解释一下:通过NavParams提供的get方法可以从上一界面获取数据,get(param:string)中的param就是上一界面中传过来的Object中的key,这儿要换成string类型。通过 NavControl.pop() 可以返回至上一界面。
NavParams
get
get(param:string)
param
key
NavControl.pop()
保存后,项目自动刷新,在首页点击按钮,会发现跳转失败invalid link LazyLoadPage,通过ctrl+c终止项目,然后运行ionic serve重启即可。
invalid link LazyLoadPage
ctrl+c
效果如下:
根目录下,通过ionic generate page normal-load --no-module(关于此命令行的更多解释见文章最后)创建一个非懒加载界面,此时会在src文件夹下会增加新的文件夹,此时目录如下:
ionic generate page normal-load --no-module
src
. ├── app ├── components ├ ... ├── pages │ ├── home │ │ ├── home.html │ │ ├── home.scss │ │ └── home.ts │ ├── lazy-load │ │ ├── lazy-load.html │ │ ├── lazy-load.module.ts │ │ ├── lazy-load.scss │ │ └── lazy-load.ts │ └── normal-load │ ├── normal-load.html │ ├── normal-load.scss │ └── normal-load.ts ...
对比可以发现,非懒加载界面少了一个module.ts文件,除此之外,normal-load.ts的代码中少了@IonicPage()这个装饰器。
module.ts
@IonicPage()
然后修改app.module.ts中的内容如下:
... import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { NormalLoadPage } from '../pages/normal-load/normal-load'; @NgModule({ declarations: [ MyApp, HomePage, NormalLoadPage ], ... entryComponents: [ MyApp, HomePage, NormalLoadPage ], ... }) export class AppModule {}
Note:只要是非懒加载的界面,都需要在app.module.ts中这两处添加,除非APP很大后使用子模块,这个是后话了,这里不考虑此情况。
app.module.ts
下面处理非懒加载界面的跳转,在home页添加button按钮,并绑定点击跳转的事件,代码如下:
home.html ... <button class="btn-primary" (click)="toNormalLoadPage()">跳转到非懒加载界面</button>
home.ts import { NormalLoadPage } from '../normal-load/normal-load'; ... toNormalLoadPage(){ this.navCtrl.push(NormalLoadPage, { name: 'handbook', age: 20 }); }
同样需要NavController.push()方法这里需要注意的是NormalLoadComponent是非懒加载界面,并且需要导入,不是string,比较下和跳转到懒加载界面的区别。
NavController.push()
NormalLoadComponent
接着处理非懒加载界面,代码如下:
normal-load.html <ion-header> <ion-navbar> <ion-title>normal-load</ion-title> </ion-navbar> </ion-header> <ion-content padding> <p>name:{{name}}</p> <p>age:{{age}}</p> </ion-content>
normal-load.ts import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'normal-load', templateUrl: 'normal-load.html' }) export class NormalLoadPage { name:string; age:number; constructor(public navCtrl: NavController, public navParams: NavParams) { this.name=this.navParams.get('name'); this.age=this.navParams.get('age'); } }
获取从上一界面传过来的值的用法和上部分是一样的,同样,返回上一界面的方法也是一致的,这里就不再赘述了,感兴趣的可以参考上面的用法试一下。 运行一下,效果如下:
生成懒加载和非懒加载界面的时候,我们用到了ionic提供的命令 ionic generate [<type>] [<name>],熟悉Angular开发的人会觉得很亲切,其中type类型有component(组件),directive(指令), pipe(管道),provider(service),tabs(tabs页面),page(界面),前三个和Angular中是一样的概念,provider其实就是service,换了一个叫法而已,后面两个是ionic特有的类型。更多命令行的用法请参见 commands
ionic generate [<type>] [<name>]
component(组件)
directive(指令)
pipe(管道)
provider(service)
tabs(tabs页面)
page(界面)
provider
service
Note:创建界面的命令只在根目录下才起作用,其他目录下运行会报错。另外 lazy-load如果改变成lazy-load-page会发现生成的文件名称会自动把page去掉,这是ionic默认处理的。
lazy-load
lazy-load-page
page
App在运行时会首先加载app.module.ts中的内容,假如AppModule需要加载的界面过多,会影响性能,从而影响用户体验。特别是在项目很大,界面很多,某些界面很少被点击进入的情况下,这就造成了浪费。
App
AppModule
ionic3 中贴心的提供了界面懒加载的功能,当用户点击跳转的时候,界面才加载进来,节约了App启动所需的加载时间和资源。
ionic3
当然ionic 3也有预加载,具体参见 ionicPage,需要大家自己去研究了。
ionic 3
请问如何实现公用底部tabs,就是每个页面的底部都是相同的tab
@cjk87927 具体见config,里面有一个参数叫tabsHideOnSubPages用来控制是否在子页面隐藏 Tab
tabsHideOnSubPages
@JerryMissTom 搞定了,非常感谢
@cjk87927 不客气
我们的APP肯定不是只有一个界面,这就需要了解ionic的内部导航的用法了。在ionic介绍这一章节提到,ionic实现了适合移动端开发的堆栈式导航系统,通过简单的
push
和pop
实现界面的跳转和传值。ionic中界面分两种,懒加载界面和非懒加载的,所以这篇我们分两个部分来讲解,最后会介绍下懒加载界面和非懒加载界面的区别。还是使用之前的项目,根目录下通过
ionic serve
运行我们的项目懒加载界面
根目录下,通过
ionic generate page lazy-load
(关于此命令的更多解释见文章最后)创建一个懒加载界面,会在src/pages
目录下新建一个文件夹,里面包含四个文件。如下:下面开始从
home
页跳转到LazyLoad
界面,首先在home
页添加button
按钮,并绑定点击跳转的事件,代码如下:解释一下:
NavController
是ionic
导航的核心,它提供了push()
操作可以跳转并传值至其他界面,this.navCtrl.push(page:string,params:object)
中第一个参数是懒加载界面的名字,是string
类型,第二个是传给下一个界面的参数,是Object
类型。懒加载界面的名字是lazy-load.ts
中导出的类的名字。下面我们开始在懒加载界面中接收数据,代码如下(ionic创建界面时自动生成的注释可以删除):
解释一下:通过
NavParams
提供的get
方法可以从上一界面获取数据,get(param:string)
中的param
就是上一界面中传过来的Object
中的key
,这儿要换成string
类型。通过NavControl.pop()
可以返回至上一界面。保存后,项目自动刷新,在首页点击按钮,会发现跳转失败
invalid link LazyLoadPage
,通过ctrl+c
终止项目,然后运行ionic serve
重启即可。效果如下:
非懒加载界面
根目录下,通过
ionic generate page normal-load --no-module
(关于此命令行的更多解释见文章最后)创建一个非懒加载界面,此时会在src
文件夹下会增加新的文件夹,此时目录如下:对比可以发现,非懒加载界面少了一个
module.ts
文件,除此之外,normal-load.ts的代码中少了@IonicPage()
这个装饰器。然后修改app.module.ts中的内容如下:
Note:只要是非懒加载的界面,都需要在
app.module.ts
中这两处添加,除非APP很大后使用子模块,这个是后话了,这里不考虑此情况。下面处理非懒加载界面的跳转,在
home
页添加button
按钮,并绑定点击跳转的事件,代码如下:同样需要
NavController.push()
方法这里需要注意的是NormalLoadComponent
是非懒加载界面,并且需要导入,不是string,比较下和跳转到懒加载界面的区别。接着处理非懒加载界面,代码如下:
获取从上一界面传过来的值的用法和上部分是一样的,同样,返回上一界面的方法也是一致的,这里就不再赘述了,感兴趣的可以参考上面的用法试一下。 运行一下,效果如下:
解释
generate命令
生成懒加载和非懒加载界面的时候,我们用到了ionic提供的命令
ionic generate [<type>] [<name>]
,熟悉Angular开发的人会觉得很亲切,其中type类型有component(组件)
,directive(指令)
,pipe(管道)
,provider(service)
,tabs(tabs页面)
,page(界面)
,前三个和Angular中是一样的概念,provider
其实就是service
,换了一个叫法而已,后面两个是ionic
特有的类型。更多命令行的用法请参见 commandsNote:创建界面的命令只在根目录下才起作用,其他目录下运行会报错。另外
lazy-load
如果改变成lazy-load-page
会发现生成的文件名称会自动把page
去掉,这是ionic默认处理的。懒加载和非懒加载
App
在运行时会首先加载app.module.ts
中的内容,假如AppModule
需要加载的界面过多,会影响性能,从而影响用户体验。特别是在项目很大,界面很多,某些界面很少被点击进入的情况下,这就造成了浪费。ionic3
中贴心的提供了界面懒加载的功能,当用户点击跳转的时候,界面才加载进来,节约了App
启动所需的加载时间和资源。当然
ionic 3
也有预加载,具体参见 ionicPage,需要大家自己去研究了。