Angular 2 eventos componentes secundarios transmitidos a los padres
Me gustaría implementar el patrón Angular 1.x común de tener directivas secundarias dentro de una directiva principal en Angular 2. Aquí está mi estructura deseada.
<foo>
<bar>A</bar>
<bar>B</bar>
<bar>C</bar>
</foo>
Me gustaría para estosBar
componentes para tener eventos de clic que se emiten aFoo
componente.
Aquí está miFoo
hasta aquí:
@Component({
selector: 'foo',
template: `
<div>
<ng-content></ng-content>
</div>
`
})
export class Foo {
@ContentChildren(Bar) items: QueryList<Bar>;
}
Y aquí está miBar
:
@Component({
selector: 'Bar',
template: `
<div (click)="clickity()">
<ng-content></ng-content>
</div>
`
})
export class Bar {
clickity() {
console.log('Broadcast this to the parent please!');
}
}
¿Cómo hago para notificar?Foo
cada vez que uno de susBars
se hace clic?