Aurelia EventAggregator不订阅

Question

我的Aurelia应用程序中有一个父-子组件体系结构。Panel是一个父组件视图模型，其中有一个Tool组件.

我在Panel上有一个分页UI，点击Tool应该更新的内容。问题是，跟踪单击哪个页码的变量，pageNumber仅在panel.ts中可用，而在tool.ts中不可用。因此，基本上，这是两个ViewModels之间的通信问题。

为了解决这个问题，我正在使用Aurelia的EventAggregator，下面是这的优秀教程。以下是我到现在为止所写的：

panel.html

<a class="page-link" click.delegate="pageClick(1)"> 1 </a>

panel.ts

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class Panel {

eventAggregator: EventAggregator;

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

pageClick(pageNumber) {
    var pageInfo = {
        pageNumber: pageNumber
    }
    this.eventAggregator.publish("pageClicked", pageInfo);
}

tool.ts

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class Tool {

eventAggregator: EventAggregator;

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

pageClicked() {
    this.eventAggregator.subscribe("pageClicked",
        pageInfo => {
            console.log(`${pageInfo.pageNumber} was clicked`);
        });
}

在事件被触发之前，这一切都很好。我尝试了调试，看到eventAggregator触发了pageClicked事件。但subscribe上的断点从未被击中。不知何故，subscribe方法没有触发。我在这里错过了什么？

我最初的想法是，EventAggregator实例是不同的，但我不确定它是否需要相同。任何帮助都是非常感谢的。另外，如果您知道实现intercomponent communication的其他更好的方法，请告诉我如何实现。谢谢。

Answer 1

您需要在将被调用的函数中设置订阅。也许添加一个attached回调并在那里设置订阅。确保释放订阅，可能是在detached回调中。我现在在手机上，但是如果你需要一个代码示例，让我知道，当我回到家的时候我会添加一个。