Aurelia EventAggregator nicht abonnieren

Question

Ich habe eine Eltern-Kind-Komponente Architektur in meiner Aurelia App. Panel ist ein Eltern-Komponenten-View-Modell, in dem sich eine Tool Komponente befindet.

Ich habe eine Paginierung Benutzeroberfläche auf Panel, klicken Sie auf die Tool sollte aktualisiert werden. Das Problem ist, dass die Variable, die angibt, auf welche Seitennummer geklickt wurde, pageNumber nur in panel.ts und nicht in tool.ts verfügbar ist. Im Grunde ist dies ein Problem der Kommunikation zwischen zwei ViewModels.

Um dieses Problem zu lösen, verwende ich Aurelia EventAggregator von this ausgezeichnete Tutorial. Hier ist, was ich bis jetzt geschrieben:

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`); 
     }); 
} 

Dies funktioniert einwandfrei, bis das Ereignis ausgelöst wird. Ich versuchte das Debuggen und sah, dass eventAggregator das Ereignis pageClicked ausgelöst hat. Aber der Breakpoint auf subscribe wurde nie getroffen. Irgendwie wird die subscribe Methode nicht ausgelöst. Was fehlt mir hier?

Mein erster Gedanke ist, dass EventAggregator Instanz ist anders, aber ich bin mir nicht sicher, ob es gleich sein muss. Jede Hilfe wird geschätzt. Auch, wenn Sie einen anderen besseren Weg kennen, um intercomponent communication zu erreichen, lassen Sie mich bitte wissen, wie. Vielen Dank.

Answer 1

Sie müssen das Abonnement in einer Funktion einrichten, die aufgerufen wird. Fügen Sie vielleicht einen attached Callback hinzu und richten Sie dort das Abonnement ein. Stellen Sie sicher, dass Sie das Abonnement möglicherweise in einem detached-Rückruf zurückweisen. Ich bin gerade auf Mobilgeräten unterwegs, aber wenn du ein Codebeispiel benötigst, lass es mich wissen, und ich werde eines hinzufügen, wenn ich nach Hause komme.