博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ionic2系列——使用DeepLinker实现指定页面URL
阅读量:6711 次
发布时间:2019-06-25

本文共 2464 字,大约阅读时间需要 8 分钟。

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组件添加一个绑定:

运行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] }]

 

转载地址:http://fxalo.baihongyu.com/

你可能感兴趣的文章
在路由器里插入和删除ACL
查看>>
我的友情链接
查看>>
前端开发IDE
查看>>
OpenStack从入门到放弃
查看>>
戴尔和EMC已经成为正式的竞争对手
查看>>
6425C-Lab12 管理DC(1)
查看>>
RocketMQ调研笔记
查看>>
maven 注册 jar
查看>>
高并发写入mysql的设计
查看>>
成长点滴:我不知道该说些什么?
查看>>
Android widget 桌面组件开发
查看>>
HP EVA4400服务器RAID信息丢失数据恢复方法
查看>>
我的友情链接
查看>>
heap中的heapify与依次压入队列的差异
查看>>
找工作体会
查看>>
linux之使用man查看命令手册
查看>>
健康常识
查看>>
Centos 6.3安装配置supervisor进程管理工具
查看>>
jquery ajax超时设置
查看>>
有兴趣,便且坚持下来。。。。。make it
查看>>