Aurelia 取消订阅事件聚合器答案

【问题标题】：Aurelia Unsubscribe Event AggregatorAurelia 取消订阅事件聚合器
【发布时间】：2015-08-25 14:06:55
【问题描述】：

我正在使用Aurelia Framework 和Typescript，在event aggregator 中我能够发布和订阅频道。

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

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

这取自aurelia official documentation website，我似乎不太明白如何实现它。

我在aurelia gitter channel 上找到了 3 个关于此的讨论，其中一个给出了以下退订示例：

sub = ea.subscribe();

//unsubscribe the event
sub();

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

如何在 Typescript 中取消订阅 event aggregator？

现在，使用这段代码

    @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 的方法不会只执行一次，而是与 cosntructor 被调用的次数一样多。所以，如果我在主页上 3 次，它将被执行 3 次。

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

谢谢！

【问题讨论】：

标签： typescript aurelia

【解决方案1】：

2015 年 10 月 14 日编辑

EventAggregator 类的subscribe 函数返回一个~~“dispose”函数~~“subscription”对象：

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

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

在视图模型中，订阅事件的最佳时间是attached。同样，取消订阅的最佳时间是detached。

如果您的 Home 视图模型使用这种模式，它会是什么样子（注意：我已经删除了您的订阅者和发布者类，因为我认为它们在 EventAggregator 周围增加了不必要的复杂性并且很难解释您的问题的解决方案）。

@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();
  }
}

【讨论】：

我真正缺少的是对 dispose 函数的引用。非常感谢！:)
这是在 Aurelia 的 10 月版本中更新的。 subscribe 调用现在返回一个订阅对象，您可以在该对象上调用 dispose() 方法来终止订阅。

【解决方案2】：

您需要取消订阅 deactivate()/detach()，据我所知，使用 Typescript 不会改变这一点。

【讨论】：