Eventos de componente filho angular 2 transmitidos para o pai

Gostaria de implementar o padrão Angular 1.x comum de ter diretivas filho dentro de uma diretiva pai no Angular 2. Aqui está minha estrutura desejada.

<foo>
  <bar>A</bar>
  <bar>B</bar>
  <bar>C</bar>
</foo>

Eu gostaria dessesBar componentes para ter eventos de clique que são emitidos para oFoo componente.

Aqui está o meuFoo tão longe:

@Component({
  selector: 'foo',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `
})
export class Foo {
   @ContentChildren(Bar) items: QueryList<Bar>;
}

E aqui está o meuBar:

@Component({
  selector: 'Bar',
  template: `
    <div (click)="clickity()">
      <ng-content></ng-content>
    </div>
  `
})
export class Bar {
  clickity() {
    console.log('Broadcast this to the parent please!');
  }
}

Como faço para notificarFoo sempre que um de seusBars é clicado?

questionAnswers(3)

yourAnswerToTheQuestion