HarmonyOS鸿蒙Next中ArkUI路由/导航系列四：Navigation页面信息查询

HarmonyOS鸿蒙Next中ArkUI路由/导航系列四：Navigation页面信息查询

作为一个容器组件，开发者可以在NavDestination中增加自定义组件。在自定义组件内部，如果想获取路由信息，开发者可以使用接口queryNavigationInfo与queryNavDestinationInfo查询。

1、queryNavigationInfo

开发者可以在Navigation内部的自定义组件中，通过queryNavigationInfo接口查询Navigation相关的路由信息，例如，在NavDestination组件中查询其所在的Navigation信息，以及对应的路由控制器：

// QueryNavDest.ets

@Component
struct QueryNavDestination {
  name: string = 'NA'
  stack: NavPathStack = new NavPathStack()

  aboutToAppear(): void {
    // 通过查询NavigationInfo，获取当前的NavPathStack实例
    this.stack = this.queryNavigationInfo()?.pathStack!
    // 通过查询NavigationInfo，获取当前所在Navigation的id信息，具体为开发者设置在Navigation上的通用属性`id`
    let navigationId = this.queryNavigationInfo()?.navigationId
    console.log('AceNavigation', 'query navigationInfo in QueryNavDestination, navigationId: ' + navigationId)
  }
  
  build() {
    NavDestination() {
       ...
    }
    .title('QueryNavDestination')
  }
}

2、queryNavDestinationInfo

与queryNavigationInfo相似，开发者可以通过queryNavDestinationInfo查询当前自定义组件所在的NavDestination信息。例如，在自定义组件NaviOperations中查询当前navDestination页面的name、param与mode。

关于返回值NavDestinationInfo的更多信息，请参见：自定义组件内置方法-自定义组件-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

// QueryNavDest.ets

@Component
struct QueryNavDestination {
  name: string = 'NA'
  stack: NavPathStack = new NavPathStack()

  build() {
    NavDestination() {
      // 将内容区封装至自定义组件NaviOperations()中
      NaviOperations()
    }
    .title('QueryNavDestination')
  }
}

@Component
struct NaviOperations {
  stack: NavPathStack = new NavPathStack()

  aboutToAppear(): void {
    // 通过查询NavDestinationInfo，获取当前所在NavDestination的name。
    let name = this.queryNavDestinationInfo()?.name
    console.log('AceNavigation', 'query navDestination in NaviOperations, navDestination name: ' + name)
    // 通过查询NavDestinationInfo，获取当前所在NavDestination的路由参数。开发者可以通过不同的自定义参数来控制页面展示不同的内容。
    let param = this.queryNavDestinationInfo()?.param
    // 注意！出于安全与隐私的考虑，路由参数不要明文输出！如下仅做示例
    console.log('AceNavigation', 'query navDestination in NaviOperations, navDestination param: ' + JSON.stringify(param))
    // 通过查询NavDestinationInfo，获取当前所在NavDestination的模式，0为标准页面，1为dialog类型页面，也就是透明的弹窗类型页面。
    let navDestinationMode = this.queryNavDestinationInfo()?.mode
    console.log('AceNavigation', 'query navDestination in NaviOperations, navDestination mode: ' + navDestinationMode)
  }

  build() {
    Column() {...}
}

从API18开始，可以通过指定入参isInner来控制查找方向：当为false时，会查找当前自定义组件外部的第一个NavDestination的信息，与上文中的接口行为一致。当为true时，会查找当前自定义组件内部的第一个NavDestination的信息。例如，在navigation外增加按钮，随时查询当前自定义组件内部的第一个navDestination的信息：

// QueryNavigation.ets

@Component
struct QueryNavigation {
  stack: NavPathStack = new NavPathStack()

  aboutToAppear(): void {
    this.stack.pushPath({name: 'queryPageOne'})
  }

  build() {
    Column() {
      Button('向内queryNavDestinationInfo')
        .width(330)
        .margin(7)
        .onClick(() => {
          // 通过查询NavDestinationInfo，获取当前自定义组件内部的第一个NavDestination的name。
          let name = this.queryNavDestinationInfo(true)?.name
          console.log('AceNavigation', 'query navDestination in QueryNavigation, navDestination name: ' + name)
          // 通过查询NavDestinationInfo，获取当前自定义组件内部的第一个NavDestination的路由参数。开发者可以通过不同的自定义参数来控制页面展示不同的内容。
          let param = this.queryNavDestinationInfo(true)?.param
          // 注意！出于安全与隐私的考虑，路由参数不要明文输出！如下仅做示例
          console.log('AceNavigation', 'query navDestination in QueryNavigation, navDestination param: ' + JSON.stringify(param))
          // 通过查询NavDestinationInfo，获取当前自定义组件内部的第一个NavDestination的模式，0为标准页面，1为dialog类型页面，也就是透明的弹窗类型页面。
          let navDestinationMode = this.queryNavDestinationInfo(true)?.mode
          console.log('AceNavigation', 'query navDestination in QueryNavigation, navDestination mode: ' + navDestinationMode)
        })
      Navigation(this.stack) {

      }
      .id('QueryNavigation')
      .hideNavBar(true)
    }
  }
}

查询接口方便开发者在分模块开发过程中，能方便的获取当前所处页面的信息，而无需关心自己被哪个页面集成。