0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙OS开发实例:【工具类封装-emitter组件间通信】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-03-27 22:13 次阅读

import Emitter from '@ohos.events.emitter';
import pasteboard from '@ohos.pasteboard';

MyEmitterUtil 是一个针对 HarmonyOS 的事件驱动编程封装类,主要用于组件间的通信和数据传递。

使用要求:

  • DevEco Studio 3.1.1 Release 或更高版本
  • API 版本:api 9 或更高

示例用法:

  1. 父组件绑定、解绑、向子组件发送事件:

    aboutToAppear() {
      this.myEmitterUtil.onFather((eventData: EmitterData) = > {
         console.info('父组件监听结果: ', JSON.stringify(eventData));
         // 判断事件类型并执行相应操作...
       });
    }
    
     aboutToDisappear() {
       this.myEmitterUtil.offFather();
     }
    
     // 向子组件发送事件
     this.myEmitterUtil.emitChild(MyEmitterUtil.UPDATE_DETAIL, "携带的测试数据");
    
  2. 子组件绑定、解绑、向父组件发送事件:

    aboutToAppear() {
    this.myEmitterUtil.onChild((eventData: EmitterData) = > {
    console.info('子组件监听结果: ', JSON.stringify(eventData));
    // 判断事件类型并执行相应操作...
    });
    }
    
    aboutToDisappear() {
    this.myEmitterUtil.offChild();
    }
    
    // 向父组件发送事件
    this.myEmitterUtil.emitFather(MyEmitterUtil.UPDATE_LIST, "测试");
    this.myEmitterUtil.emitFather(MyEmitterUtil.UPDATE_LIST_2, "测试2");
    
    
    

参考文档:

请查阅 HarmonyOS 开发文档了解详细信息

export class MyEmitterUtil {
  private static readonly LOG_TAG = 'MyEmitterUtil';
  private static EVENT_ID_COUNTER: number = 0; // 自动递增,生成唯一的事件ID

  private readonly eventIdFather: number;
  private readonly eventIdChild: number;

  constructor() {
    this.eventIdFather = MyEmitterUtil.EVENT_ID_COUNTER++;
    this.eventIdChild = MyEmitterUtil.EVENT_ID_COUNTER++;
    console.info(`事件ID(父组件): ${this.eventIdFather}`);
    console.info(`事件ID(子组件): ${this.eventIdChild}`);
  }

  // 定义业务状态标识常量
  static readonly UPDATE_LIST = "UPDATE_LIST";
  static readonly UPDATE_LIST_2 = "UPDATE_LIST_2";
  static readonly UPDATE_DETAIL = "UPDATE_DETAIL";

  /**
   * 在组件的`aboutToAppear`生命周期钩子中调用,监听父组件事件
   * @param callback 事件回调函数,接受一个`EmitterData`对象作为参数
   */
  onFather(callback: (eventData: EmitterData) = > void) {
    Emitter.on({ eventId: this.eventIdFather }, (event) = > {
      if (callback) {
        callback(new EmitterData(event.data.flag, event.data.data));
      }
    });
  }

  /**
   * 在组件的`aboutToDisappear`生命周期钩子中调用,解除父组件事件监听
   */
  offFather() {
    Emitter.off(this.eventIdFather);
  }

  /**
   * 在组件的`aboutToAppear`生命周期钩子中调用,监听子组件事件
   * @param callback 事件回调函数,接受一个`EmitterData`对象作为参数
   */
  onChild(callback: (eventData: EmitterData) = > void) {
    Emitter.on({ eventId: this.eventIdChild }, (event) = > {
      if (callback) {
        callback(new EmitterData(event.data.flag, event.data.data));
      }
    });
  }

  /**
   * 在组件的`aboutToDisappear`生命周期钩子中调用,解除子组件事件监听
   */
  offChild() {
    Emitter.off(this.eventIdChild);
  }

  /**
   * 向父组件发送事件
   * @param flag 事件类型标识
   * @param data 事件携带的数据
   */
  emitFather(flag: string, data: string) {
    Emitter.emit(
      { eventId: this.eventIdFather, priority: Emitter.EventPriority.IMMEDIATE },
      { data: { flag, data } }
    );
  }

  /**
   * 向子组件发送事件
   * @param flag 事件类型标识
   * @param data 事件携带的数据
   */
  emitChild(flag: string, data: string) {
    Emitter.emit(
      { eventId: this.eventIdChild, priority: Emitter.EventPriority.IMMEDIATE },
      { data: { flag, data } }
    );
  }
}

/**
 * 用于封装事件数据的类
 */
export class EmitterData {
  flag: string = "";
  data: string = "";

  constructor(flag: string, data: string) {
    this.flag = flag;
    this.data = data;
  }
}

/**
 * 获取剪贴板内容的辅助函数
 */
export async function getPasteboardContent(): Promise< void > {
  try {
    const systemPasteboard = pasteboard.getSystemPasteboard();
    const pasteData = await systemPasteboard.getData();
    const text = pasteData.getPrimaryText();
    console.info('剪贴板内容: ', text);
  } catch (e) {
    console.error('获取剪贴板内容失败: ', JSON.stringify(e));
  }
}

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 封装
    +关注

    关注

    126

    文章

    7778

    浏览量

    142718
  • HarmonyOS
    +关注

    关注

    79

    文章

    1967

    浏览量

    30013
  • 鸿蒙OS
    +关注

    关注

    0

    文章

    188

    浏览量

    4367
收藏 人收藏

    评论

    相关推荐

    鸿蒙OS崛起,鸿蒙应用开发工程师成市场新宠

    beta版,为开发者提供了一整套的开发工具和资源,极大地提高了开发效率。 据了解,通过蚂蚁数科mPaaS提供的模块化工具组件
    发表于 04-29 17:32

    HarmonyOS开发实例:【自定义Emitter

    使用[Emitter]实现事件的订阅和发布,使用[自定义弹窗]设置广告信息。
    的头像 发表于 04-14 11:37 973次阅读
    HarmonyOS<b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【自定义<b class='flag-5'>Emitter</b>】

    OpenHarmony开发实例:【鸿蒙.bin文件烧录】

    如何使用HiBurn工具烧录鸿蒙的.bin文件到Hi3861开发板。
    的头像 发表于 04-14 09:54 392次阅读
    OpenHarmony<b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【<b class='flag-5'>鸿蒙</b>.bin文件烧录】

    鸿蒙OS开发实例:【HarmonyHttpClient】网络框架

    鸿蒙上使用的Http网络框架,里面包含纯Java实现的HttpNet,类似okhttp使用,支持同步和异步两种请求方式;还有鸿蒙版retrofit,和Android版Retrofit相似的使用,解放双手般优雅使用注解、自动解析json
    的头像 发表于 04-12 16:58 801次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【HarmonyHttpClient】网络框架

    鸿蒙OS开发学习:【尺寸适配实现】

    鸿蒙开发中,尺寸适配是一个重要的概念,它可以帮助我们在不同屏幕尺寸的设备上正确显示和布局我们的应用程序。本文将介绍如何在鸿蒙开发中实现尺寸适配的方法。
    的头像 发表于 04-10 16:05 1673次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>学习:【尺寸适配实现】

    鸿蒙OS开发实例:【组件化模式】

    组件化一直是移动端比较流行的开发方式,有着编译运行快,业务逻辑分明,任务划分清晰等优点,针对Android端的组件化;与Android端的组件化相比,HarmonyOS的
    的头像 发表于 04-07 17:44 592次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【<b class='flag-5'>组件</b>化模式】

    鸿蒙OS开发实例:【应用状态变量共享】

    平时在开发的过程中,我们会在应用中共享数据,在不同的页面共享信息。虽然常用的共享信息,也可以通过不同页面中组件信息共享的方式,但有时使用应用级别的状态管理会让
    的头像 发表于 04-03 15:09 1243次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【应用状态变量共享】

    鸿蒙OS开发实例:【工具封装-页面路由】

    import common from '@ohos.app.ability.common'; import router from '@ohos.router'封装app内的页面之间跳转、app与app之间的跳转工具
    的头像 发表于 03-28 16:16 862次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【<b class='flag-5'>工具</b><b class='flag-5'>类</b><b class='flag-5'>封装</b>-页面路由】

    鸿蒙OS开发实例:【工具封装-http请求】

    ;@ohos.promptAction';** **封装HTTP接口请求,提供格式化的响应信息输出功能。 使用 DevEco Studio 3.1.1 Release 及以上版本,API 版本为 api 9 及以上
    的头像 发表于 03-27 22:32 1281次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b><b class='flag-5'>实例</b>:【<b class='flag-5'>工具</b><b class='flag-5'>类</b><b class='flag-5'>封装</b>-http请求】

    鸿蒙APP开发实战:【Api9】拍照、拍视频;选择图片、视频、文件工具

    鸿蒙开发过程中,经常会进行系统调用,拍照、拍视频、选择图库图片、选择图库视频、选择文件。今天就给大家分享一个工具
    的头像 发表于 03-26 16:27 723次阅读
    <b class='flag-5'>鸿蒙</b>APP<b class='flag-5'>开发</b>实战:【Api9】拍照、拍视频;选择图片、视频、文件<b class='flag-5'>工具</b><b class='flag-5'>类</b>

    鸿蒙实战项目开发:【短信服务】

    两位前阿里高级研发工程师联合打造的 《鸿蒙NEXT星河版OpenHarmony开发文档》 里面内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用
    发表于 03-03 21:29

    鸿蒙OS和开源鸿蒙什么关系?

    内核,其他功能都以模块的形式存在。     华为用的是鸿蒙OS 我们都知道,华为手机的鸿蒙OS是可以运行安卓软件的,是因为系统中有安卓兼容层,所以可以简单这么理解:
    的头像 发表于 01-30 15:44 1084次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b>和开源<b class='flag-5'>鸿蒙</b>什么关系?

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 1762次阅读
    <b class='flag-5'>鸿蒙</b>ArkUI<b class='flag-5'>开发</b>-Tabs<b class='flag-5'>组件</b>的使用

    鸿蒙开发OpenHarmony组件复用案例

    ; ...... } 开发实践 我们看下组件复用的实际使用案例。示例中,会创建一个图片列表页面,使用懒加载LazyForEach,以及组件复用能力。 创建数据源 首先,创建了一个业务对象
    发表于 01-15 17:37

    鸿蒙开发基础-Web组件之cookie操作

    }) ... } ... 本文章主要是对鸿蒙开发当中ArkTS语言的基础应用实战,Web组件里的cookie操作。更多的鸿蒙应用开发
    发表于 01-14 21:31