项目

ASP.NET Core MVC / Razor Pages UI:JavaScript 事件 API

abp.event 对象是一个简单的服务,用于在浏览器中发布和订阅全局事件。

此 API 与服务器端的本地或分布式事件无关。它在浏览器边界内工作,使 UI 组件(代码部分)能够以松散耦合的方式进行通信。

基本用法

发布事件

使用 abp.event.trigger 来发布事件。

示例:发布 购物篮已更新 事件

abp.event.trigger('basketUpdated');

这将触发所有已订阅的回调函数。

订阅事件

使用 abp.event.on 来订阅事件。

示例:处理 购物篮已更新 事件

abp.event.on('basketUpdated', function() {
  console.log('已处理 basketUpdated 事件...');
});

订阅事件后,您将开始接收事件通知。

取消事件订阅

如果需要取消先前订阅的事件,可以使用 abp.event.off(eventName, callback) 函数。这种情况下,您需要将回调函数作为独立的函数声明。

示例:订阅与取消订阅

function onBasketUpdated() {
  console.log('已处理 basketUpdated 事件...');
}

// 订阅
abp.event.on('basketUpdated', onBasketUpdated);

// 取消订阅
abp.event.off('basketUpdated', onBasketUpdated);

取消订阅后,您将不再接收事件通知。

事件参数

您可以向 trigger 方法传递任意数量的参数,并在订阅回调中获取这些参数。

示例:将购物篮作为事件参数传递

// 订阅事件
abp.event.on('basketUpdated', function(basket) {
  console.log('新的购物篮对象:');
  console.log(basket);
});

// 触发事件
abp.event.trigger('basketUpdated', {
  items: [
    {
      "productId": "123",
      "count": 2
    },
    {
      "productId": "832",
      "count": 1
    }
  ]
});

多个参数

如果需要传递多个参数,可以这样使用:abp.event.on('basketUpdated', arg0, arg1, arg2)。然后在订阅方的回调函数中添加相同的参数列表。

提示: 或者,您可以发送一个包含每个参数的独立字段的单个对象。这样可以在未来扩展/更改事件参数时,不会破坏现有的订阅者。

在本文档中