Aurelia 取消订阅事件聚合器 [英] Aurelia Unsubscribe Event Aggregator

问题描述

我将 Aurelia Framework 与 Typescript 一起使用，并且在 事件聚合器 中，我可以发布和订阅频道.

I am using Aurelia Framework with Typescript and in the event aggregator I am able to publish and subscribe to channels.

问题是我无法取消订阅频道.

The problem is that I am unable to unsubscribe from a channel.

注意:所有形式的 subscribe 方法都返回一个 dispose 函数.您可以调用该函数来处理订阅并停止接收消息.如果视图模型由路由器管理，则最好在其停用回调中进行处理，或者如果它是任何其他视图模型，则在其分离的回调中.

Note: All forms of the subscribe method return a dispose function. You can call this function to dispose of the subscription and discontinue receiving messages. A good place to dispose is either in a view-model's deactivate callback if it is managed by a router, or in its detached callback if it is any other view-model.

这是摘自 aurelia 官方文档网站，我不知道似乎真的了解如何实现这一点.

This is taken from the aurelia official documentation website and I don't really seem to understand how to implement this.

我访问了 aurelia gitter 频道，我发现了 3 个关于此的讨论，其中一个给出了以下退订示例:

I went on the aurelia gitter channel and I found 3 discussions about this, where one of them gave the following example for unsubscribe:

sub = ea.subscribe();

//unsubscribe the event
sub();

问题是这段代码在 TypeScript 中不起作用.

The problem is that this code doesn't work in TypeScript.

如何取消订阅 Typescript 中的 事件聚合器?

How do I unsubscribe from an event aggregator in Typescript?

现在，使用此代码

    @inject(Publisher, Subscriber)
export class Home {
    publisher: Publisher;
    subscriber: Subscriber;
    channelName = "testChannel";

    constructor(pub: Publisher, sub: Subscriber) {
        this.publisher = pub;
        this.subscriber = sub;

        this.subscriber.subscribe(this.channelName);

        this.publisher.publish(this.channelName, "Ana are mere");
    }
}


@inject(EventAggregator)
export class Publisher {
    eventAggregator: EventAggregator = null;

    constructor(agg: EventAggregator) {
        this.eventAggregator = agg;
    }

    publish(channelName: string, object: Object) {
        this.eventAggregator.publish(channelName, object);
    }
}


@inject(EventAggregator)
export class Subscriber {
    eventAggregator: EventAggregator = null;

    constructor(agg: EventAggregator) {
        this.eventAggregator = agg;
    }

    subscribe(channelName: string) {
        this.eventAggregator.subscribe(channelName, object => {
            //TODO do something with received object
            alert(object);
        });
    }
    unsubscribe(channelName: string) {
        debugger;
    }
}

在执行Home 组件时，subscribe 的方法不是只执行一次，而是调用构造函数的次数.所以，如果我在首页上过 3 次，它会被执行 3 次.

when executing the Home component, the method for subscribe isn't executed just once, but as many times as the cosntructor has been called. So, if I have been on the home page 3 times, it will get executed 3 times.

所以:为什么我的订阅者方法被多次触发?如何在 TypeScript 中取消订阅 event-aggregator?

So: Why is my subscriber method fired multiple times ? How do I unsubscribe from event-aggregatoor in TypeScript?

谢谢！

推荐答案

10/14/2015 EDIT

EventAggregator 类的 subscribe 函数返回一个 "dispose" 函数 "subscription" 对象:

The EventAggregator class's subscribe function returns a "dispose" function "subscription" object:

var subscription = eventAggregator.subscribe('some event', value => alert(value));

您需要保留对订阅对象的引用，以便在不再需要订阅时销毁订阅.

You need to keep a reference to the subscription object so that you can destroy the subscription when it's no longer needed.

在视图模型中，订阅事件的最佳时机是附加.同样，取消订阅的最佳时机是 detached.

In a view-model, the perfect time to subscribe to an event is when it's attached. Likewise, a perfect time to unsubscribe is when it's detached.

这是您的 Home 视图模型在使用此模式时的样子(注意:我已经删除了您的 Subscriber 和 Publisher 类，因为我认为它们在 EventAggregator 和很难解释您的问题的解决方案).

Here's what your Home view-model would look like if it used this pattern (note: I've dropped your Subscriber and Publisher classes because I think they're adding unnecessary complexity around the EventAggregator and are making it hard to explain the solution to your issue).

@inject(EventAggregator)
export class Home {
  eventAggregator: EventAggregator;
  subscription: { dispose: () => void };

  constructor(eventAggregator: EventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  attached() {
    this.subscription = this.eventAggregator.subscribe('some event', value => alert(value));
  }

  detached() {
    this.subscription.dispose();
  }
}

这篇关于Aurelia 取消订阅事件聚合器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！