HarmonyOS 鸿蒙Next新人求助：Navigation传参，新页面如何接收参数 (API 14)

HarmonyOS 鸿蒙Next新人求助：Navigation传参，新页面如何接收参数 (API 14)

现在不是推荐用Navigation组件导航吗，但是我不大理解他这个如何实现传参数到另一个界面。之前试着用了个用户首选项存储用户ID，以实现全局调用，但这个单独页面传参数我不太了解如何用现在的Navigation组件解决……

//自定义了一个类BookData
export class BookData {
  isbn: string
  title: string
  author: string
  rating: number
  votes:number
  coverUrl: string

  constructor(isbn: string, title: string, author: string, rating: number, votes:number,coverUrl: string) {
    this.isbn = isbn
    this.title = title
    this.author = author
    this.rating = rating
    this.votes = votes
    this.coverUrl = coverUrl
  }
}

然后我的页面IndexPage使用Navigation组件中传参时,将BookData的一个实例Book作为参数传到DetailPage页

//IndexPage.ets
this.pathStack.pushPathByName('DetailPage', book, true);

那么我请问如何再目标页获取这个实例呢？这个返回值类型令我有点困惑

//DetailPage.ets
this.pageInfos.getParamByName('IndexPage')

因为这个函数的返回值unknown,也不能赋值给一个BookData对象，会报错

Type ‘unknown[]’ is missing the following properties from type ‘BookData’: isbn, title, author, rating, and 2 more.

直接断言类型会报错:

private book: BookData = this.pageInfos.getParamByName('IndexPage') as BookData

Conversion of type ‘unknown[]’ to type ‘BookData’ may be a mistake because neither type sufficiently overlaps with the other. Type ‘unknown[]’ is missing the following properties from type ‘BookData’: isbn, title, author, rating, and 2 more.

还是说我需要传参的时候实现一个toJson之类的方法，接收的时候再将其转成一个新的BookData实例吗，或者是类似转变2次的操作吗？


更多关于HarmonyOS 鸿蒙Next新人求助：Navigation传参，新页面如何接收参数 (API 14)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

首先，你的操作整体上是没问题的。

然而，在获取参数的API使用上与官网有点出入。

你应该这样子：

const book: BookData = this.pageInfos.getParamByName('DetailPage')[0] as BookData

官网链接帖这里，体会一下？(当然，我个人认为官网文档还需要补充完善细节)

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V14/arkts-navigation-navigation-V14#参数获取

更多关于HarmonyOS 鸿蒙Next新人求助：Navigation传参，新页面如何接收参数 (API 14)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


首先感谢回复哈！正是因为看官方文档没懂啊，但你这个写法应该也不太对，BookData类 那肯定不是用const修饰的，另外这样写这个获取这个getParamByName的返回值是unknown[]类型的数据，将其断言为BookData的类型，但我后续再调用this.book.title，实际运行时会报错Error message:Cannot read property title of undefined，

我这里是API12

  1. const或let或其他修饰符无所谓，这个不重要，根据你自己需要调整；
  2. 我在API12的环境下是没有任何问题的，API14理论上没有做调整，你要看清后面有as BookData的转换，如果转换后还是unknown，不清楚你那边什么问题了；如果转换不了，那直接就Except了。

注意看我写的那行重点，你需要获取的是DetailPage中的参数，而不是IndexPage。

//目标页面 NavDestination() { } .onReady((context: NavDestinatiNavDestination() { context.pathStack.setInterception({ didShow: (from: NavDestinationContext | “navBar”) => { if (typeof from !== “string”) { this.from = (from as NavDestinationContext).pathInfo.name console.log(‘xxz’,this.from) if (this.from === “TestPage”) { this.examPreparationShow = false } } } }) this.testNum = (context.pathInfo.param as string[])[1] this.topicList = JSON.parse((context.pathInfo.param as string[])[0]) }

//发起语句 this.stack.pushPathByName(RouterMapC.ANSWER,[content,testList.length+1],true)

1、在DetailPage 获取 NavPathStack 实例

.onReady((context: NavDestinationContext)=>{})

2、获得传入数据，需要解析；

export function lastName(stack: NavPathStack): string {
  if (stack.size() > 0) {
    return stack.getAllPathName()[stack.size()-1]
  }
  return ""
}

export function paramByIndex(stack: NavPathStack, index: number = 0): Object {
  const obj = stack.getParamByIndex(index) as ObjectOrNull
  if (obj) {
    return obj
  }
  return ''
}

export function paramByName(stack: NavPathStack, name: string): Array<Object> {
  const obj = stack.getParamByName(name) as Array<ObjectOrNull>
  if (obj.length > 0) {
    const obj02: Array<Object> = obj.filter((value) => {
      if (value) {
        return value
      }
      return ''
    }) as Array<Object>

    return obj02
  }
  return []
}

export function param(stack: NavPathStack): Object {
  const objs: Array<Object> = paramByName(stack, lastName(stack))
  if (objs.length > 0) {
    return objs[objs.length-1]
  }
  return ''
}

在HarmonyOS（鸿蒙）Next中，使用Navigation进行页面跳转并传递参数，可以通过以下步骤实现：

  1. 传递参数： 在跳转页面时，可以通过Navigation的navigate方法传递参数。例如：

    let params = {
    key1: 'value1',
    key2: 'value2'
};
Navigation.navigate({
    uri: 'pages/NewPage',
    params: params
});

  2. 接收参数： 在新页面中，可以通过this.props或this.route.params来接收传递的参数。例如：

    export default class NewPage extends Component {
    constructor(props) {
        super(props);
        console.log(this.props); // 打印传递的参数
    }
}

  3. 使用参数： 接收到的参数可以在页面的逻辑中使用，例如显示在UI组件中或进行进一步的处理。

完整示例：

// 跳转页面并传递参数
let params = {
    key1: 'value1',
    key2: 'value2'
};
Navigation.navigate({
    uri: 'pages/NewPage',
    params: params
});

// 新页面接收参数
export default class NewPage extends Component {
    constructor(props) {
        super(props);
        console.log(this.props); // 打印传递的参数
    }
}
回到顶部