HarmonyOS鸿蒙Next中关于Navigation参数获取

HarmonyOS鸿蒙Next中关于Navigation参数获取 Navigation参数传递问题

4 回复

手机邮箱是多少，

基本信息

邮箱: phone-email@example.com

更多关于HarmonyOS鸿蒙Next中关于Navigation参数获取的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


selectMediaList的数据结构是什么样的，什么类型的

请参考以下代码是可以获取到的：

class TmpClass{
  count:number=10
}

[@Builder](/user/Builder)
export function PageOneBuilder(name: string, param: Object) {
  PageOne()
}

[@Component](/user/Component)
export struct PageOne {
  @State selectMediaList:Array<FileBean> = []
  pageInfos: NavPathStack = new NavPathStack()

  aboutToAppear(): void {
    let aa = new FileBean()
    aa.remoteUrl = 'baidu.com'
    this.selectMediaList.push(aa)
  }

  build() {
    NavDestination() {
      Column() {
        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            let tmp = new TmpClass()
            const uris = 'qqqqq'
            const params: Record<string, Object> = {
              'selectedList': this.selectMediaList,
              'uris': uris
            };
            this.pageInfos.pushPathByName('pageTwo', params) //将name指定的NavDestination页面信息入栈，传递的数据为param
          })
      }.width('100%').height('100%')
    }.title('pageOne')
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    }).onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack
    })
  }
}

@Observed
export class FileBean {
  remoteUrl?: string ='123';
  thumbnailUrl?: string ='456';
  localUri?: string ='789';
  fileName?: string;
  date?: string;
  dateStr?: string;
  dateCode: number = 0;
  timeCode: number = 0;
  size?: string;
  type?: MediaType;
  isSelect: boolean = false;
  progress: number = 0;
}

export enum MediaType {
  VIDEO,
  PHOTO
}

import { FileBean } from './PageOne'

[@Builder](/user/Builder)
export function PageTwoBuilder(name: string, param: Object) {
  PageTwo()
}

[@Component](/user/Component)
export struct PageTwo {
  pathStack: NavPathStack = new NavPathStack()
  private menuItems: Array<NavigationMenuItem> = [
    {
      value: "1",
      icon: 'resources/base/media/undo.svg',
    },
    {
      value: "2",
      icon: 'resources/base/media/redo.svg',
      isEnabled: false,
    },
    {
      value: "3",
      icon: 'resources/base/media/ic_public_ok.svg',
      isEnabled: true,
    }
  ]
  build() {
    NavDestination() {
      Column() {
        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pathStack.pushPathByName('pageOne', null)
          })
      }.width('100%').height('100%')
    }.title('pageTwo')
    .menus(this.menuItems)
    .onBackPressed(() => {
      this.pathStack.pop()
      return true
    })
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
      let params = context.pathInfo.param as Record<string, Object>;
      let selectedList = params['selectedList'] as FileBean[]
      console.log("current page config info is " + JSON.stringify(selectedList))
    })
  }
}

在HarmonyOS鸿蒙Next中，Navigation参数的获取主要通过Navigation组件来实现。开发者可以通过Navigation组件的getParam方法来获取传递的参数。具体步骤是在目标页面中使用Navigation组件的getParam方法，传入参数名称即可获取对应的值。

例如，假设从页面A跳转到页面B时传递了一个名为userId的参数，那么在页面B中可以通过以下代码获取该参数：

let userId = Navigation.getParam('userId');

此外，Navigation组件还支持通过getParams方法获取所有传递的参数，返回一个包含所有参数的键值对对象。例如：

let params = Navigation.getParams();

需要注意的是，Navigation组件的参数获取是同步的，开发者无需等待异步操作即可获取参数值。如果页面跳转时未传递参数，则getParam方法将返回undefined。

在鸿蒙Next中，Navigation组件还支持通过setParam方法动态设置参数，以便在页面跳转过程中传递更多信息。例如：

Navigation.setParam('key', 'value');

这些方法为开发者提供了灵活的参数传递和获取方式，使得页面间的数据交互更加便捷。

在HarmonyOS鸿蒙Next中，可以通过Navigation组件进行页面导航。获取导航参数的方式如下：

  1. 通过router.push传递参数：

    router.push({
  url: 'pages/DetailPage',
  params: { id: 123, name: 'example' }
});

  2. 在目标页面获取参数：

    @State private id: number = 0;
@State private name: string = '';

onPageShow() {
  const params = router.getParams();
  this.id = params['id'];
  this.name = params['name'];
}

通过router.getParams()可以获取传递的参数，并在页面中使用。

回到顶部