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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 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
解决GD中文乱码问题
2007/02/14 PHP
php调整服务器时间的方法
2015/04/03 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
PDO::getAttribute讲解
2019/01/28 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
Django实现跨域请求过程详解
2019/07/25 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
理工科学生的自我评价
2013/12/15 职场文书
委托证明的格式
2014/01/10 职场文书
优秀老师事迹材料
2014/02/05 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
行政求职信
2014/07/04 职场文书
繁星春水读书笔记
2015/06/30 职场文书
读书笔记格式
2015/07/02 职场文书
高三语文教学反思
2016/02/16 职场文书
python如何做代码性能分析
2021/04/26 Python