Angular 2：事件发射器

Question

我有一个这样的模板：

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

我想从页脚向主要组件发出一个值。在我的父母身上，我有一个名为setStepCounter(value : number) : void 的函数。当我像这样将事件发射器添加到我的页脚组件时：

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

我收到以下错误：self.context.setStepCounter 不是函数。

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) {
    ...
  }
}