HarmonyOS 路由页面接收回传参数方式

router.pushUrl或者replaceUrl,是否支持异步接收跳转的目标页面返回的params。

比如A页面中的自定义组件CustomComponent内部直接router跳转到B页面,B页面回传数据, B页面回传数据使用back,目前仅支持在A页面的onPageShow里面去router.getParams吗? 能否有方案在CustomComponent组件内部router并在组件内接收回传的数据呢,比如:

async pushUrl({url:'',params:{}}): Promise<Params>
  • 1.
HarmonyOS
2024-10-24 13:15:17
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

当前router.getParams不支持 async await。

1、B页面使用back回传参数的话,路由栈会保存前一个页面,所以自定义组件不会触发aboutToAppear方法,也就无法直接获取router返回的参数。

解决措施:可以在A页面中的onPageShow 方法中获取到参数,然后传给自定义组件

2、如果想要A页面的自定义组件可以直接获取router返回的参数的话,需要使用replaceUrl方法。

流程:A页面使用replaceUrl方法进入B页面,B页面再使用replaceUrl回到A页面,这样可以直接在自定义组件中获取到router传的参数

不管是使用back还是使用replaceUrl,都是可以通过A页面将参数传给自定义组件

推荐使用Navigation组件,参考demo:

// pageA.ets

import { pageBTmp, Pages } from './PageB'  
  
@Entry  
@Component  
struct PageA {  
  @State message: string = 'Hello World'  
  @Provide('pageInfo') pageInfo: NavPathStack = new NavPathStack()  
  
  @Builder  
  PageMap(name: string) {  
    if (name === 'pageB') {  
      pageBTmp({ names: name, values: this.pageInfo } as Pages)  
    }  
  }  
  build() {  
    Navigation(this.pageInfo) {  
      Column() {  
        Text(this.message)  
          .width('80%')  
          .height(50)  
          .margin(10)  
  
        CustomComp()  
      }  
    }.title('NavIndex').navDestination(this.PageMap)  
  }  
}  
  
class ParamWithOp {  
  operation: number = 1  
  count: number = 10  
}  
  
// A页面中的自定义组件  
@Component  
struct CustomComp {  
  @Consume pageInfo: NavPathStack  
  @State routerParams: ParamWithOp | undefined = undefined  
  
  build() {  
    Column() {  
      Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })  
        .width('80%')  
        .height(40)  
        .margin(10)  
        .onClick(() => {  
          this.pageInfo.pushPath({name: 'pageB', param: new ParamWithOp(), onPop: (popInfo: PopInfo)=>{  
            // 在自定义组件中获取到返回的参数  
            this.routerParams = popInfo.result as ParamWithOp  
          }});  
        })  
  
      Text('返回的数据: ')  
      Text(JSON.stringify(this.routerParams))  
    }  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.

// pageB.ets

export class Pages {  
  names: string = ""  
  values: NavPathStack | null = null  
}  
  
class ParamWithOp {  
  operation: number = 1  
  count: number = 10  
  constructor(count: number) {  
    this.count = count;  
  }  
}  
  
@Builder  
export function pageBTmp(info: Pages) {  
  NavDestination() {  
    Column() {  
      Button('pop', { stateEffect: true, type: ButtonType.Capsule })  
        .width('80%')  
        .height(40)  
        .margin(20)  
        .onClick(() => {  
          // 回退到上一个页面,将处理结果传入push的onPop回调中。  
          (info.values as NavPathStack).pop(new ParamWithOp(111));  
        })  
    }.width('100%').height('100%')  
  }.title('pageB')  
  .onBackPressed(() => {  
    // 回退到上一个页面,将处理结果传入push的onPop回调。  
    (info.values as NavPathStack).pop(new ParamWithOp(0));  
    return true;  
  })  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
分享
微博
QQ
微信
回复
2024-10-24 15:03:03


相关问题
HarmonyOS 路由参数如何接收
1114浏览 • 1回复 待解决
HarmonyOS 路由跳转怎么接收参数
914浏览 • 1回复 待解决
HarmonyOS 组件接收页面参数
1072浏览 • 1回复 待解决
HarmonyOS 页面接收参数报错
637浏览 • 1回复 待解决
HarmonyOS 路由跳转获取跳转参的方式
1981浏览 • 1回复 待解决
HarmonyOS 参数参问题
886浏览 • 1回复 待解决
HarmonyOS 构造参数失败问题
695浏览 • 1回复 待解决
HarmonyOS Web runJavaScript 如何参数
878浏览 • 1回复 待解决
HarmonyOS router.back返回参数如何接收
713浏览 • 1回复 待解决
HarmonyOS 页面反向值怎么
857浏览 • 1回复 待解决