Question

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

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

要解决此问题，请按照this优秀教程使用Aurelia＆＃39; 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回调中处理订阅。我现在在移动设备上，但是如果你需要一个代码示例，请告诉我，当我回到家时，我会添加一个。

Aurelia EventAggregator未订阅

1 个答案: