【页面路由导航】页面跳转传递NavPathStack对象实例方法(通过自定义组件查询接口获取)

24 阅读1分钟

Navigation是路由容器组件,一般作为首页的根容器。Navigation组件适用于模块内和跨模块的路由切换,一次开发,多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验,并提供多种标题栏样式来呈现更好的标题和内容联动效果。

在之前的文章中有介绍如何实现页面的跳转,在页面跳转时,需要传递NavPathStack对象实例,以保证不同的页面中,页面的操作有效性和一致性。

NavPathStack对象传递主要有四种方法。

  1. 子页面通过OnReady回调获取(在【页面路由导航】三步实现页面跳转的完整示例 中有介绍)。

  2. 通过全局的AppStorage接口设置获取。

  3. 通过@Provide和@Consume装饰器,将NavPathStack变量传递给子页面。

  4. 通过自定义组件查询接口获取。

本篇内容基于【页面路由导航】三步实现页面跳转的完整示例 之上,实现在子页面通过自定义组件查询接口获取NavPathStack对象实例,主要实现如下

  1. 导航页面(主页面)如下
@Entry
@Component
struct Index {
  pageStack: NavPathStack = new NavPathStack();
  build() {
    Navigation(this.pageStack) {
      // ...
    }
    .hideTitleBar(true)
  }
}
  1. 子页面如下
@Entry
@Component
struct SecondPage_Nav {
  pageStack:NavPathStack|null = null;
  aboutToAppear() {
   // 注意:通过queryNavigationInfo接口向上查找其最近的一个类型为Navigation的父亲节点
   let navigationInfo: uiObserver.NavigationInfo | undefined = this.queryNavigationInfo();
   if (navigationInfo !== undefined) {
      this.pageStack = navigationInfo.pathStack;
    }
  }
  build() {
    NavDestination() {
     // ...
    }
  }
}

完成上述改动后,在子页面通过自定义组件查询接口获取NavPathStack对象实例 的主体代码完成。