当前位置: 首页 > news >正文

鸿蒙ArkTs开发,后台触发数据变化后更新页面 UI事件

文章目录

  • 1、定义全局事件管理器
  • 2、触发事件
  • 3、页面监听事件

如果你的需求是后台触发状态变化后更新页面 UI,而不是通过页面跳转传递数据,可以通过以下方式实现:
通过自定义事件管理器,后台触发事件后通知页面更新 UI。

1、定义全局事件管理器

// EventManager.ts
type EventHandler = (data: any) => void;

class EventManager {
  private events: Map<string, EventHandler[]> = new Map();

  // 订阅事件
  on(eventName: string, handler: EventHandler) {
    if (!this.events.has(eventName)) {
      this.events.set(eventName, []);
    }
    this.events.get(eventName)?.push(handler);
  }

  // 取消订阅
  off(eventName: string, handler?: EventHandler) {
    if (handler) {
      const handlers = this.events.get(eventName)?.filter(h => h !== handler);
      if (handlers) {
        this.events.set(eventName, handlers);
      }
    } else {
      this.events.delete(eventName);
    }
  }

  // 发布事件
  emit(eventName: string, data?: any) {
    const handlers = this.events.get(eventName);
    if (handlers) {
      handlers.forEach(handler => handler(data));
    }
  }
}

export const eventManager = new EventManager();

2、触发事件

// 后台逻辑(如 Service 或定时任务)
import { eventManager } from './EventManager';

eventManager.emit('updateUI', { message: 'New message from background!' });

3、页面监听事件

// Page.ets
import { eventManager } from './EventManager';

@Entry
@Component
struct Page {
  @State message: string = 'Waiting for message...';

  aboutToAppear() {
    // 订阅事件
    eventManager.on('updateUI', (data) => {
      this.message = data.message; // 更新状态
    });
  }

  aboutToDisappear() {
    // 取消订阅
    eventManager.off('updateUI');
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .margin(20);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

相关文章:

  • 【折线图 Line】——1
  • 影刀RPA中级案例总结
  • 运维Apache面试题及参考答案
  • 17 款电脑压缩工具详解及下载指南(2025 年最新版)
  • Express + MongoDB 实现文件上传
  • ‌Debian 包版本号比较规则详解
  • c++中初始化列表的使用
  • 攻防世界WEB(新手模式)18-easyphp
  • Vue打包(webpack)缓存
  • DCDC60V电源ic,支持48V降压5V、36V降压5V,SL3037B替换TPS54362
  • final 关键字在不同上下文中的用法及其名称
  • Spring Data JPA 中的分页实现:从 BasePage 到 Pageable
  • Dify使用和入门
  • 浮点数在内存中的存储
  • 使用Spring Data Redis操作Redis
  • 学习threejs,使用ShaderMaterial自定义着色器材质
  • wps角标快速生成
  • 2025全开源Java多语言跨境电商外贸商城/Tk/FB内嵌商城I商家入驻I批量下单I完美运行
  • Vue前端项目构建教程
  • 自动化测试无法启动(java.net.SocketException)
  • 10个网站做站群/软文自助发稿平台
  • 建设银行忘记密码网站首页/seo顾问服务
  • 网络彩票的网站怎么做/怎么推广自己的公司
  • 小程序网站做多大尺寸/直接进网站的浏览器
  • 大型网站建设费用/百度竞价排名事件
  • 南昌智能建站模板/网络推广平台哪家公司最好