鸿蒙 Navigation组件下的组件获取pageStack问题

他的猫哎2024-12-26 3:08

前情提要

最近学了下鸿蒙开发，刚入坑，问题不少，记录一下。

问题描述

在Navigation下的HomePage组件，通过Provide、Consume获取pageStack

在HomePage组件中 @Builder 定义的WaterItem 下的点击事件获取this.pageStack为undefined

typescript 复制代码

// 主入口文件
@Entry
@Component
struct IndexPage {
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()

  build() {
      Navigation(this.pageStack) {
          HomePage()
      }
      .width('100%').height('100%').backgroundColor('#FFFFFF')
      .hideTitleBar(true)
      .hideToolBar(false)
  }
}

HomePage组件代码

typescript 复制代码

// HomePage 组件
@Component
struct HomePage {
  @Consume('pageStack') pageStack:NavPathStack;

  abc: number = 1;

  dataSource: WaterFlowDataSource = new WaterFlowDataSource();

  @Builder
  WaterItem(item: TGridItem) {
    Column(){
        Button('跳转')
          .width('70vp')
          .height('30vp')
          .backgroundColor('#000000')
          .fontColor('green')
          .onClick(()=> {
		      this.pageStack.pushPathByName('Detail', null)
		  })
	}
  }

  build() {
     Column(){
       WaterflowList({
         gridData: this.dataSource,
         waterflowItemParam: this.WaterItem
       })
         .width('100%')
         .height('100%')
     }
    .width('100%')
    .height('100%')
  }
}

这里this.pageStack是undefined会直接导致闪退,this.abc是可以直接获取到值的。

解决方案：

这里换成这个写法，就可以了。

typescript 复制代码

waterflowItemParam: item => { this.WaterItem(item) }

原因不太清楚，this 指向问题？但是为什么能访问到abc？