2016-07-28 5 views
2

Eltern VorlageWie funktioniert die Angular 2-Kommunikation zwischen Kind- und Elternkomponente?

<problem-form *ngIf=showProblemView (addProblem)=problemAdd($event)></problem-form> 

Kinder Komponente

import { Component, Output, EventEmitter } from '@angular/core'; 
@Output() addproblem = new EventEmitter<string>(); 
onClick() { 
    this.addproblem.emit('something') 
    console.log('onSubmit') 
    this.active = false; 
} 

Eltern Ereignishandler

problemAdd($event) { 
    debugger; 
    console.log('eventString ') 
} 

Ich weiß, dass das Kind Ereignis aus nach dem Debugger aussendet. Mein Verständnis ist, dass das übergeordnete Kind das ausgesendete Kindereignis nicht erfasst. Irgendwelche Ideen? Vielen Dank!

Antwort

3

In Ihrem Kind:

@Output() addproblem = new EventEmitter<string>(); 

Im parent:

<problem-form *ngIf=showProblemView (addProblem)=problemAdd($event)></problem-form> 
             ^

Mitteilung der Hauptstadt P.

Angular 2 case-sensitive ist.

Benennen Sie die Eigenschaft entweder in addProblem oder den Ausgabehandler in (addproblem) um.

+0

Dank @acdcjunior Ich muss meine VSCode finden Einstellungen ändern, um Groß- und Kleinschreibung zu beachten. StackOverflow möchte, dass ich 7 Minuten warte, um die Antwort zu akzeptieren. Vielen Dank! –

+0

Danke @tibus für Ihre Antwort gestern. Ich habe diese Frage abgelehnt, weil ich meinen Code manuell in stackoverflow eingegeben habe. Hier habe ich kopiert/eingefügt. Aber in beiden Fällen war der Fehler auf eine falsch benannte Variable zurückzuführen. –

Verwandte Themen