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?