HarmonyOS鸿蒙Next中如何从上一个页面接受一个参数

HarmonyOS鸿蒙Next中如何从上一个页面接受一个参数 我希望从Literature页面带参数titles跳转到articlePage页面，在articlePage根据titles自动生成每个title命名的按钮，articlePage页面怎么接受？

import {Articles} from './poetry/article'

@Builder
export function LiteratureBuilder(){
  Literature()
}

@Component
export struct Literature{

  @Consume pathStack: NavPathStack = new NavPathStack()

  build() {
    NavDestination(){
      Button('跳转')
        .onClick(() => {
          const titles = Articles.getValues().map(item => item.title)
          this.pathStack.pushPathByName("articlePage", titles)
        })
    }
  }
}

@Builder
export function articlePageBuilder(){
  articlePage()
}

@Component
export struct articlePage{

  @Consume pathStack: NavPathStack = new NavPathStack()

  build() {
    NavDestination(){
      Button('end')


    }
  }
}

更多关于HarmonyOS鸿蒙Next中如何从上一个页面接受一个参数的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

开发者您好，通过此方法传递参数时：this.pathStack.pushPathByName(“articlePage”, titles)

可以在articlePage页面中调用onShown在页面显隐时重新获取页面参数：

示例代码如下：

.onShown(()=>{
    const param:string[] = this.pathStack.getParamByName('articlePage')[0] as string[]
})

更多关于HarmonyOS鸿蒙Next中如何从上一个页面接受一个参数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


////发送参数页面（Literature）
@Component
export struct Literature {
  @Consume pathStack: NavPathStack = new NavPathStack()

  build() {
    NavDestination() {
      Button('跳转')
        .onClick(() => {
          const titles = Articles.getValues().map(item => item.title)
          // 通过params传递参数
          this.pathStack.pushPathByName("articlePage", { titles: titles })
        })
    }
  }
}

///接收参数页面（articlePage）
@Component
export struct articlePage {
  @Consume pathStack: NavPathStack = new NavPathStack()
  @State titles: string[] = [] // 存储接收到的参数

  aboutToAppear() {
    // 获取传递的参数
    const params = router.getParams() as Record<string, string[]>;
    if (params?.titles) {
      this.titles = params.titles
    }
  }

  build() {
    NavDestination() {
      Column() {
        // 动态生成按钮
        ForEach(this.titles, (title: string) => {
          Button(title)
            .width('80%')
            .margin(5)
        }, (item: string) => item)
      }
    }
  }
}

我怎么把取回来的参数保存起来？这些title是要做成按钮名的 另外pageParam是啥？

pageParam:string=''
titileArray:Array<string>=[]  //保存title的数组

NavDestination() {

    // ...

}

.onReady((context: NavDestinationContext) => {

    this.pathStack = context.pathStack;

    this.pageParam = context.pathInfo.param as string;
    this.titleArray.push(this.pageParam)  //保存到数组

})

}

在HarmonyOS Next中，使用页面路由router的pushUrl方法传递参数，目标页面通过router.getParams()接收。示例：传递时在parameters中设置键值对，接收时声明一个对象并使用@State装饰器存储参数。

在HarmonyOS Next中，通过NavPathStack进行页面跳转并传递参数时，目标页面可以通过@State装饰器结合aboutToAppear生命周期来接收参数。

在你的articlePage组件中，需要做以下修改：

  1. 声明状态变量：使用@State装饰器声明一个变量来存储接收到的titles数组。
  2. 获取导航参数：在aboutToAppear生命周期中，从pathStack获取传递的参数。
  3. 动态生成按钮：根据titles数组使用ForEach循环生成按钮。

修改后的articlePage组件代码如下：

@Component
export struct articlePage {
  @Consume pathStack: NavPathStack = new NavPathStack()
  @State titles: Array<string> = [] // 声明状态变量存储titles

  aboutToAppear() {
    // 获取当前NavPath的param参数
    const currentPath = this.pathStack.getPathByName('articlePage')
    if (currentPath && currentPath.param) {
      this.titles = currentPath.param as Array<string> // 将参数赋值给状态变量
    }
  }

  build() {
    NavDestination() {
      Column() {
        // 使用ForEach根据titles数组动态生成按钮
        ForEach(this.titles, (title: string) => {
          Button(title)
            .margin(5)
        }, (title: string) => title)
        
        Button('end')
      }
    }
  }
}

关键点说明：

  • aboutToAppear生命周期函数在页面即将显示时调用，适合在这里获取导航参数
  • currentPath.param包含了通过pushPathByName传递的第二个参数（即titles数组）
  • ForEach用于根据数组数据动态生成UI组件，第三个参数是唯一键生成器

这样修改后，当从Literature页面跳转到articlePage页面时，titles数组会被正确传递并用于动态生成按钮。

回到顶部