Ionic2系列之使用DeepLinker实现指定页面URL


Posted in Javascript onNovember 21, 2016

Ionic2使用了近似原生App的页面导航方式,并不支持Angular2的路由。这种方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面就有点问题了,这种情况下Angular2的router可以提供更灵活的配置。比如在首页是一个Tabs页面的情况下,如何控制用户看到的第一项Tab?默认情况下都是会导航到第一个Tab,而且地址栏的URL并不会跟随页面的切换而变化。好在Ionic2提供了一种类似路由的DeepLinker功能,可以实现以上目的。

DeepLinker与NavController一起工作,但是用户基本不会直接与这个东西打交道。只有用户需要对URL进行处理的时候才需要配置这个。使用DeepLinker后,如果NavController push了一个新的页面,DeepLinker会在配置中寻找匹配的URL设置并更新URL。

我们的需求场景是这样的,在微信公众号的菜单栏有n个菜单,点击不同的菜单,需要直接导航到我们页面对应的Tab上,而不是让用户再去选择Tab。下面说一下具体做法。

首先新建一个Ionic2项目。目前最新的CLI已经升级到了2.1.12,ionic-angular升级到了RC3,强烈建议更新。使用以下命令来创建一个Tabs模板的项目:

ionic start TabsDemo tabs --v2

默认会建立有三个Tab页的项目。主要有4个页面,一个Tabs是主页面,其他三个Tab页分别是home,about,contact。

基本用法

DeepLinker是在IonicModule.forRoot方法中使用,作为第三个参数:

imports: [
IonicModule.forRoot(MyApp, {}, {
links: []
})
]

数组里的对象是DeepLinkerConfig,配置了URL和页面的匹配关系,一般来说是这样子的:

imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
]
})
]

也就是说,当浏览HomePage这个页面的时候,URL会变成http://examplesite/#/home/home

传参

有的时候也需要从URL传递参数,可以用下面的形式:

links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user' }
]

这样在DetailPage的ts文件中就可以接收user这个参数,进行处理。需要注意的是,这个参数应该是可以被DeepLinker序列化的,因此建议设置为一个string或number。

实现跳转到指定Tab

修改app.module.ts文件,将IonicModule.forRoot方法改为如下代码:

IonicModule.forRoot(MyApp, {}, {
links: [
{ component: TabsPage, name: 'Tabs', segment: 'tabs/:tabId' }
]
})

这里的意思是,给Tabs页传一个参数,如http://examplesite/#/tabs/1,这样就让App直接跳到第二个Tab。

修改tabs.ts文件,改为如下代码:

export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
public tabId: number;
public selectTabIndex: number;
constructor(public params: NavParams) {
this.tabId = params.get("tabId");
if(this.tabId != undefined || this.tabId !=null)
{
this.selectTabIndex = this.tabId;
}
}
}

添加了两个变量,然后通过NavParams取得传递过来的参数并赋值给selectTabIndex。

修改tabs.html,给Tabs组件添加一个绑定:

<ion-tabs selectedIndex={{selectTabIndex}}>

运行ionic serve命令,会自动打开http://localhost:8100/地址,现在打开一个新窗口,输入http://localhost:8100/#/tabs/1,OK,直接跳到第二个Tab了。打完收工。

默认历史

还有一种情况,如果从其他页面直接导航到内部的页面,当点击返回的时候,该返回哪个页面呢?比如从推送通知进到新闻详情页面,当点击返回的时候,应该返回首页。所以Ionic2提供了defaultHistory参数,如果页面历史堆栈中不存在历史页面的时候,就会返回到这个页面。用法如下:

links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user', defaultHistory: [HomePage] }
]

以上所述是小编给大家介绍的Ionic2系列之使用DeepLinker实现指定页面URL,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
Jquery cookie操作代码
Mar 14 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 #Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 #Javascript
JS实现图片上传预览功能
Nov 21 #Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 #Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 #Javascript
javascript入门之数组[新手必看]
Nov 21 #Javascript
jQuery UI插件实现百度提词器效果
Nov 21 #Javascript
You might like
linux下php上传文件注意事项
2016/06/11 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
Prototype使用指南之dom.js
2007/01/10 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
记录Django开发心得
2014/07/16 Python
Python中的各种装饰器详解
2015/04/11 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
Python如何进行时间处理
2020/08/06 Python
HTTP状态码详解
2021/03/18 杂记
政治思想表现评语
2014/05/04 职场文书
2014年租房协议书范本
2014/10/30 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
签字仪式主持词
2015/07/03 职场文书
初中语文教学反思范文
2016/03/03 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python