2017-12-11 5 views
1

Ich habe die folgende Architektur:Output() nicht Ereignis emittierende

UiControlsModule 
|- Component 1 
|- Component 2 

Modul 1 wird importiert und in SharedModule exportiert.

CasesModule 
|- CaseListComponent 
|- // several other components 

SharedModule wird in CasesModule importiert.

nun innerhalb CaseListComponent habe ich eine Instanz der Komponente 1 (von UiControlsModule):

<cre-question-group 
    (valueChanged)="catchValueChange(question)"> 
</cre-question-group> 

Ich versuche, die Wertänderung hier zu fangen, die ich in der Komponente definiert haben 1:

@Output() valueChanged = new EventEmitter<Question>(); 

someMethod(question: Question) { 
    this.valueChanged.emit(question); 
} 

Die Methode someMethod() wird aufgerufen, und es wird das Ereignis ausgegeben. Ich kann jedoch das Ereignis in meiner CaseListComponent nicht abfangen. Wenn ich valueChanged inspiziere, kann ich auch sehen, dass es keinen Teilnehmer darauf gibt (das Array ist leer).

Ich nehme an, es ist, weil es von einem Modul zum anderen geht, aber nicht sicher, wie man es löst.

Jede Hilfe ist sehr :) geschätzt

@Update: Ist es möglich, dass es nicht, weil es sich um eine Komponente eines anderen Moduls ist nicht funktioniert? Normalerweise sollte das funktionieren, oder liege ich falsch?

@Update 2:

Jetzt habe ich versucht, es mit einem Dienst ein Thema und beobachtbaren Kommunikation über Nachrichten zu implementieren, aber aus irgendeinem Grund Wunder dies auch nicht funktioniert. Hier ist, wie ich es umgesetzt:

Frage group.component.ts:

catchValueChange(question: Question) {  

    this.messagesService.sendComponentChangeEvent(question); 
} 

messages.service.ts:

@Injectable() 
export class MessagesService { 

    constructor() { } 

    // Observable string sources 
    private componentChangeEvent = new Subject<Question>(); 

    // Observable string streams 
    componentValueChanged$ = this.componentChangeEvent.asObservable(); 

    // Service message commands 
    sendComponentChangeEvent(question: Question) { 
     this.componentChangeEvent.next(question); // <-- breakpoint reaches this point as expected. After, nothing happens - and there's no observer on componentChangeEvent. 
    } 
} 

Fall-list.component. html:

ngOnInit() { 

    // watch for changes on edit of the components 
    this.subscription = this.messagesService.componentValueChanged$.subscribe((question: any) => { 
     console.log(question.id + " (" + question.type + "): " + question.selection); 
    }); 

In der Vorlage abonniere ich auf der Observable, aber es erreicht nie diesen Punkt. Ich nehme an, dass der Fehler irgendwo in messages.service.ts liegt? Dev-Konsole zeigt keine Fehler.

+0

Verwendung 'this.valueChanged.next (Frage);' statt 'this.valueChanged.emit (Frage); ' – Chandru

+0

Dies funktioniert auch nicht. – dave0688

+0

Wann rufen Sie someMethod auf? Stellen Sie sicher, dass es nach der Initialisierung der Komponente aufgerufen wird – David

Antwort

0

Der Parameter in Ihrer Vorlage Event-Handler-Funktion muss$event genannt werden. Sie können es in Ihrer Handler-Methodendeklaration (in der Komponentenklassendefinition) beliebig aufrufen.

Versuchen wie folgt aus:

Vorlage.html

<cre-question-group (valueChanged)="catchValueChange($event)"></cre-question-group> 

(statt)

<cre-question-group 
    (valueChanged)="catchValueChange(question)"> 
</cre-question-group> 

Typoskript

catchValueChange(question: Question) { 
    console.log('question', question); 
} 
+0

Funktioniert leider nicht ... – dave0688

+0

Darf ich wissen, welche Elternteil Komponente und Kindkomponente können Sie in dieser Frage teilen – Chandru

+0

emittieren Funktion wird nur Kind zu Eltern Weg NICHT Eltern zu Kind Weg – Chandru