Angular 2：事件發射器

Question

我有一個像這樣的模板：

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

我想從頁腳向主要組件發出一個值。 在我的父母setStepCounter(value : number) : void我有一個名為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) {
    ...
  }
}