Я создаю страницу с несколькими динамическими панелями, каждая дочерняя панель имеет один и тот же HTML-код, поэтому я создал компонент родительской панели, чтобы обернуть каждую из них.
Проблема в том, что я хочу отправить событие от дочернего элемента на панель, но, похоже, не могу найти ответа. Вот что у меня есть на данный момент:
// Panel Panel Component
@Component({
selector: 'panel',
template: `
<div (emittedEvent)="func($event)">
<ng-content></ng-content>
</div>
`
})
export class PanelComponent {
constructor() {}
func(event) {
// Do stuff with the event
}
}
// Child Panel Component (one of many)
@Component({
selector: 'child-panel-one',
template: `
// Template stuff
<button (click)="emitEvent()">Click</button>
`
})
export class ChildPanelOne {
emittedValue: Boolean = false;
@Output() emittedEvent = new EventEmitter();
constructor() {}
private emitEvent() {
this.emittedValue = true;
this.emittedEvent.emit(this.emittedValue)
}
}
//
// Main Parent Template
<panel>
<child-panel-one></child-panel-one>
</panel>
Я мог бы создать общую службу, но передача логического значения от дочернего к родительскому кажется излишним.
Любые идеи?
Спасибо
