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打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
javascript验证身份证号
Mar 03 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
使用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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
使用numba对Python运算加速的方法
2018/10/15 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
师范生个人推荐信
2013/11/29 职场文书
岗位职责的构建方法
2014/02/01 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
经理聘任证明
2015/03/02 职场文书
2015年读书月活动总结
2015/03/26 职场文书
整改通知书
2015/04/20 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
消费者理赔投诉书
2015/07/02 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis