Angular 2: Eventemitter

Question

Ich habe eine Vorlage wie folgt:

<main> 
    <footer></footer> 
</main> 

ich einen Wert aus der Fußzeile auf die Hauptkomponente emittieren soll. Auf meinem Elternteil habe ich eine Funktion namens setStepCounter(value : number) : void. Als ich die eventemitter meiner Fußzeilenkomponente hinzufügen wie folgt:

@Component({ 
    selector: 'footer', 
    template: `<ng-content></ng-content> `, 
    host: { 
     '(stepCounterEmitter)': 'setStepCounter($event)' 
    } 
}) 

bekomme ich folgende Fehlermeldung: self.context.setStepCounter keine Funktion ist.

Answer 1

@Component({ 
    selector: 'footer', 
    template: `<ng-content></ng-content> <button (click)="nextCounter()>click me</button> `, 
}) 
export class Footer { 
    @Output() stepCounter:EventEmitter<number> = new EventEmitter(); 

    private counter:number = null; 
    nextCounter() { 
    this.stepCounter.emit(this.counter.++); 
    } 
} 

<main #main> 
    <footer (stepCounter)="main.setStepCounter($event)"></footer> 
</main> 

export class MainComponent { 
    setStepCounter(event:any) { 
    ... 
    } 
}