I'd like to implement the common Angular 1.x pattern of having child directives within a parent directive in Angular 2. Here's my desired structure.
<foo>
<bar>A</bar>
<bar>B</bar>
<bar>C</bar>
</foo>
I'd like for these Bar
components to have click
events that get emitted to the Foo
component.
Here's my Foo
so far:
@Component({
selector: 'foo',
template: `
<div>
<ng-content></ng-content>
</div>
`
})
export class Foo {
@ContentChildren(Bar) items: QueryList<Bar>;
}
And here's my Bar
:
@Component({
selector: 'Bar',
template: `
<div (click)="clickity()">
<ng-content></ng-content>
</div>
`
})
export class Bar {
clickity() {
console.log('Broadcast this to the parent please!');
}
}
How do I go about notifying Foo
whenever one of its Bars
is clicked?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…