事件系统eventHub,在组件中使用 eventHub.on 订阅的方法,不能访问组件的变量-鸿蒙开发者社区-51CTO.COM

事件系统eventHub,在组件中使用 eventHub.on 订阅的方法,不能访问组件的变量

事件系统eventHub

HarmonyOS
2024-05-20 21:04:27
浏览
已于2024-5-22 21:48:58修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
橱柜里的蛙

在组件中使用 eventHub.on 订阅的方法,不能访问组件的变量,如下例 this.scroller 为undefined; emitter同样crash。

 aboutToAppear() { 
   //FIXME TEST 方法会crash 
   FoundationContextHolder.getUIAbilityContext()?.eventHub?.on(AppConst.EVENTHUB_ROCKET, this.componentToTop) 
} 
​ 
 componentToTop() { 
//here crash 
   this.scroller.scrollToIndex(0) 
   Logger.info(AppConst.HOME_TAG, '_scrollTop CTHomePage') 
}

主要是由于上下文环境改变导致scroll不能正常传递,传递方法时需要bind this指针。

使用的核心API

EventHub

Scroll

核心代码解释

使用匿名函数也可以解决该问题,但是如果用多个组件监听同一个事件,所以需要调用off 取消指定方法的订阅,目前是声明了两个事件去分别订阅可以解决,但涉及到多组件订阅同一事件并不是较好的方案

核心代码如下:

import common from '@ohos.app.ability.common' 
​ 
const eventHub: common.EventHub = (getContext(this) as common.UIAbilityContext).eventHub 
@Entry 
@Component 
struct Index { 
 private scroller: Scroller = new Scroller; 
 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
​ 
 // aboutToAppear() { 
 //   eventHub.on('123', ()=>{ 
 //     this.scroller.scrollEdge(Edge.Top) 
 //   }) 
 // } 
​ 
 aboutToAppear() { 
   eventHub.on('123', this.componentToTop.bind(this)) 
} 
​ 
 componentToTop() { 
   //here crash 
   this.scroller.scrollEdge(Edge.Top) 
} 
​ 
 build() { 
   Stack({ alignContent: Alignment.TopStart }) { 
     Scroll(this.scroller) { 
       Column() { 
         ForEach(this.arr, (item: number) => { 
           ListItem() { 
             Text('' + item) 
              .width('100%') 
              .height(100) 
              .fontSize(16) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0xFFFFFF) 
          } 
        }, (item: string) => item) 
      }.width('100%').backgroundColor(0xDCDCDC) 
    } 
    .scrollBar(BarState.Off) //不显示滚动条 
    .layoutWeight(1) 
​ 
     Button('back top') 
      .onClick(() => { // 点击后回到顶部 
         eventHub.emit('123'); 
      }) 
      .margin({ top: 60, left: 20 }) 
  } 
} 
} 
​

实现效果

适配的版本信息

IDE:DevEco Studio 4.0.1.601

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-22 21:51:30
相关问题
关于emitter、eventHub使用场景
2487浏览 • 1回复 待解决
HarmonyOS eventHub创建方式咨询
32浏览 • 1回复 待解决
TaskPool里面是否可以使用EventHub
1710浏览 • 1回复 待解决
Emitter与EventHub区别是什么?
342浏览 • 1回复 待解决
image组件中使用bindContextMenu报错
341浏览 • 1回复 待解决
如何订阅系统环境变量变化
325浏览 • 1回复 待解决
自定义组件中使用@ObjectLink报错
1024浏览 • 1回复 待解决
用户订阅系统公共事件
954浏览 • 1回复 待解决