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

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

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

async pushUrl({url:'',params:{}}): Promise<Params>
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))  
    }  
  }  
}

// 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;  
  })  
}
分享
微博
QQ
微信
回复
2024-10-24 15:03:03
相关问题
HarmonyOS 路由参数如何接收
375浏览 • 1回复 待解决
HarmonyOS 页面反向值怎么
85浏览 • 1回复 待解决
HarmonyOS 页面参问题
307浏览 • 1回复 待解决
HarmonyOS关于AXIOS动态参数问题
541浏览 • 1回复 待解决
HarmonyOS 页面间如何参?
837浏览 • 1回复 待解决
HarmonyOS 路由页面管理问题
293浏览 • 1回复 待解决
HarmonyOS 路由返回页面问题
400浏览 • 0回复 待解决
Navigation实现动态路由方式
700浏览 • 1回复 待解决
从ArkTs向Native复杂参数---List参数
844浏览 • 1回复 待解决
路由参如何接参?可否给个案例?
3148浏览 • 1回复 待解决
路由传入参数有大小限制吗
857浏览 • 1回复 待解决