ionic5 angular 路由跳转与传值 页面重复打开

 

ionic5 路由跳转与传值

最近项目从1升级5，记录一些踩坑历程。

1. HTML 中使用 routerLink 属性路由进行跳转，传值时使用 queryParams 属性

<ion-item routerLink="/info1" [queryParams]="{name: '张'}"> <ion-label>页面跳转</ion-label> </ion-item> 接收方式同下（2）

2 通过 router 实现编程式导航以及携带参数与返回接收 ( 推荐 )： 一下方法可以写在

ngOnInit 中，但推荐写在

constructor（）{
//推荐写在这里接收
}

 this.router.navigate(["info1"], { queryParams: {name: "张"} }) 异步接收方式：

this.activatedRoute.queryParams.subscribe((result) => {
            if (result.name) {
              // todo 
            }
        });

同步方法

this.activatedRoute.snapshot.queryParams

3. 通过 NavController 实现编程式导航以及携带参数与返回接收：

this.navCtrl.navigateForward("info1", { queryParams: { name: "张" } }) }  接收方式同上（2）

4 通过 router 实现编程式导航以及携带参数：

this.router.navigate(["info1", {name: "张"}]) 接收方式和上面有些不一样，因为传递的是一个param,所以接收要这样写

this.activatedRoute
.params.subscribe(

param=>{

console.log(param);

})

  console.log(activatedRoute.snapshot.params); // 同步方法

返回到上一页面

1. HTML 中进行返回，slot 属性为 start 时按钮在左侧，end 则在右侧

ion-header中的 <ion-buttons slot="start"> 

2. 通过 router 编程式导航进行返回

/* * 返回到指定页面，严格点说是基于返回的动画执行的打开页面的操作 * 例如我从info1打开info2，从info2中使用router.navigateByUrl返回到info1 * 正常的返回什么都不会发生，但是这种会重新触发info1的生命周期函数 */ this.router.navigateByUrl("/tabs/tab1"); } }

3.1 通过 this.navCtrl.back(); 编程式导航进行返回

* 这种返回是基于路径的历史记录进行返回的，他在后退的时候回根据上一个打开的页面进行返回 * * 例如打开info1，然后打开info2，info2使用router.navigateByUrl进行返回，由于 * router.navigateByUrl是基于返回的动画执行的打开操作，所以info1使用nav.back进行 * 返回的时候就会进入死循环，而且由于打开顺序的问题，动画也会被改变 */

3.2 通过 this.navCtrl.pop 编程式导航进行返回

 pop不同于之前的函数，他是基于路由层级进行后退而不是基于历史记录进行后退 * 可以说从根本上就可以解决 3.1 中出现的死循环问题 */   本人理解这个比较类似于android原生操作堆栈，推出推入的操作。

 

在一篇博客看到一个大神的传值方法，分享出来，写得很好，以下是copy.

链接：https://www.cnblogs.com/hanzhe/p/14259561.html

实现页面重复打开

当我们在列表页打开一个详细信息页面的时候，一般会传递一个 ID 在详细信息页面进行查询，如果我们在详细信息页面同样还要打开一个详细信息页面时，路由重复，这样页面就不会有任何操作，这里推荐的解决方案是一种新的传值方式

例如我要重复打开 info1 页面：

1. 首先在路由上动手脚：app-routing.module

const routes: Routes = [ { path: '', loadChildren: () => import('./tabs/tabs.module').......省略 }, {

path: 'info1', loadChildren: () => import('./info1/info1.module').......省略 },

// 新增这样一个路由，代表接收变量名为time的值，以/的方式进行传值

{

path: 'info1/:time', loadChildren: () => import('./info1/info1.module')

.......省略 } ];

2. 然后在需要重复打开的页面中修改访问路径

export class Info1Page {

constructor(public navCtrl: NavController) {

} openInfo1(){

// 在访问路径后面拼【接斜线+毫秒值】，

使用毫秒值的原因就是防止值重复

this.navCtrl.navigateForward(

"info1/" + new Date().getTime());

} }

最终访问的路径就变成了: http://localhost:4200/info1/1601452910158，可以解决重复访问问题