Aurelia EventAggregator не подписывается

Question

У меня есть компонентная структура родительского элемента в моем приложении Aurelia. Panel - это материнская компонента View-model, внутри которой находится компонент Tool.

У меня есть пользовательский интерфейс для разбивки на страницы Panel, нажатие на которое должно быть обновлено Tool. Проблема в том, что переменная, которая отслеживает, какой номер страницы была нажата, pageNumber доступна только в panel.ts и недоступна в tool.ts. Таким образом, в основном это проблема связи между двумя ViewModels.

Чтобы решить эту проблему, я использую Aurelia EventAggregator, следуя this отличным учебным пособиям. Вот то, что я написал до сих пор:

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. Сейчас я на мобильный, но если вам нужен пример кода, дайте мне знать, и я добавлю его, когда вернусь домой.