HarmonyOS aboutToAppear中调用queryNavDestinationInfo\(\)，返回了undefined？

Question

import { display } from '@kit.ArkUI'

@Entry
@Component
export struct myNavigation {
  @Provide('pageInfo') pageStack: NavPathStack = new NavPathStack()
  @State message: string = 'Hello Component'
  @State messageCommon: string = 'Hello World'

  aboutToAppear(): void {
    display.getAllDisplays((err, data) => {
      let screenWidth: number = data[0].width
    })
  }

  @Builder
  buildNavDestination(name: string, param?: object) {
    if (name === CommonConstants.PATH_DETAIL) {
      DetailComponent()
    } else if (name === CommonConstants.PATH_BUYING) {
      TransactionComponent()
    }
  }

  build() {
    Navigation(this.pageStack) {
      Row() {
        Column() {
          Column() {
            Text(this.message)
              .fontSize(30)
              .onClick((e => {
                let pathInfo: NavPathInfo = new NavPathInfo('detail', new Object({ name: 111, age: '12' }))
                this.pageStack.pushDestination(pathInfo, true);
              }))
          }

          Column() {
            Text(this.messageCommon)
              .fontSize(30)
          }
        }
      }
      .width('100%')
      .height('100%')
    }
    .navDestination(this.buildNavDestination)
    .hideTitleBar(true)
    .hideBackButton(true)
    // .mode(this.isSplit ? NavigationMode.Split : NavigationMode.Stack)
    .navBarWidth('50%')
  }
}

enum CommonConstants {
  PATH_DETAIL = 'detail',

  PATH_COMPARISON = 'comparison',

  PATH_BUYING = 'buying',

  PATH_COMPARISON_DETAIL = 'comparisonDetail'
}

@Component
struct DetailComponent {
  @Consume('pageInfo') pageStack: NavPathStack;
  @State message: string = 'Hello DetailComponent Component'
  @State messageCommon: string = 'Hello DetailComponent'

  aboutToAppear(): void {
    console.log('第二页 AboutToAppear')
    // this指代MyComponent自定义节点，并从该节点向上查找其最近的一个类型为NavDestination的父亲节点
    let navDesInfo = this.queryNavDestinationInfo();
    console.log('第二页 get navDestinationInfo: ' + JSON.stringify(navDesInfo))

  }
  build() {
    NavDestination() {
      Row() {
        Column() {
          Column() {
            Text(this.message)
              .fontSize(30)
          } .onClick((e => {
            let pathInfo: NavPathInfo = new NavPathInfo('buying', new Object({ name: '小明', age: '18' }))
            this.pageStack.pushDestination(pathInfo, true);
          }))

          Column() {
            Text(this.messageCommon)
              .fontSize(30)
          }
        }
      }
      .width('100%')
      .height('100%')
    }
  }
}

@Component
struct TransactionComponent {
  @Consume('pageInfo') pageStack: NavPathStack;
  @State message: string = 'Hello TransactionComponent Component'
  @State messageCommon: string = 'Hello TransactionComponent'

  aboutToAppear(): void {
    console.log('第二页 第三页 AboutToAppear')
    // this指代MyComponent自定义节点，并从该节点向上查找其最近的一个类型为NavDestination的父亲节点
    let navDesInfo = this.queryNavDestinationInfo();
    console.log('第二页 第三页 get navDestinationInfo: ' + JSON.stringify(navDesInfo))
  }

  build() {
    NavDestination(){
      Row() {
        Column() {
          Column() {
            Text(this.message)
              .fontSize(30)
          }

          Column() {
            Text(this.messageCommon)
              .fontSize(30)
          }
        }
      }
      .width('100%')
      .height('100%')
    }
  }
}

Answer 1

需要把查询的内容，作为子组件，放在navDestination下，类似这样

NavDestination() {
  DetailComponent()
}

@Component
DetailComponent() {
  aboutToAppear() {
    this.queryNavDestinationInfo()
  }

  build() {
    xxx
  }
}

示例代码：

import { display } from '@kit.ArkUI'

@Entry
@Component
export struct myNavigation {
  @Provide('pageInfo') pageStack: NavPathStack = new NavPathStack()
  @State message: string = 'Hello Component'
  @State messageCommon: string = 'Hello World'

  aboutToAppear(): void {
    display.getAllDisplays((err, data) => {
      let screenWidth: number = data[0].width
    })
  }

  @Builder
  buildNavDestination(name: string, param?: object) {
    if (name === CommonConstants.PATH_DETAIL) {
      DetailComponent()
    }
  }

  build() {
    Navigation(this.pageStack) {
      Row() {
        Column() {
          Column() {
            Text(this.message)
              .fontSize(30)
              .onClick((e => {
                let pathInfo: NavPathInfo = new NavPathInfo('detail', new Object({ name: 111, age: '12' }))
                this.pageStack.pushDestination(pathInfo, true);
              }))
          }

          Column() {
            Text(this.messageCommon)
              .fontSize(30)
          }
        }
      }
      .width('100%')
      .height('100%')
    }
    .navDestination(this.buildNavDestination)
    .hideTitleBar(true)
    .hideBackButton(true)
    .navBarWidth('50%')
  }
}

enum CommonConstants {
  PATH_DETAIL = 'detail',
}

@Component
struct DetailComponent {
  build() {
    NavDestination() {
      DetailComponent1()
    }
  }
}

@Component
struct DetailComponent1 {
  @Consume('pageInfo') pageStack: NavPathStack;
  @State message: string = 'Hello DetailComponent Component'

  aboutToAppear(): void {
    console.log('DetailComponent1 AboutToAppear')
    // this指代MyComponent自定义节点，并从该节点向上查找其最近的一个类型为NavDestination的父亲节点
    let navDesInfo = this.queryNavDestinationInfo();
    console.log('DetailComponent1 queryNavDestinationInfo: ' + JSON.stringify(navDesInfo))
  }

  build() {
    Row() {
      Column() {
        Column() {
          Text(this.message)
            .fontSize(30)
            .onClick((e => {
              let pathInfo: NavPathInfo = new NavPathInfo('buying', new Object({ name: 222, age: '20' }))
              this.pageStack.pushDestination(pathInfo, true);
            }))
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}