Я получаю некоторые данные из http-запроса, которые я хочу передать родительскому компоненту через @Output и EventEmitter.Моя цель - создать новый элемент в дочернем компоненте, и после того, как он будет успешно сохранен в бэкэнде, добавить Id, созданный в бэкэнде, добавить его к элементу в frontEnd и, наконец, добавить его в родительское представление.
Я пытался вызвать this.newItem.emit (item) изнутри обратного вызова .finally () и .onComplete () и мы onNext () .Во всех случаях событие не было перехвачено в родительском компоненте, за исключением случая, когда я выпустил элемент сразу после .subscribe () block
child.ts
/* */
@Output() newItemEmitter= new EventEmitter();
/* */
saveItem() {
let itemToView: {
... // A lot of data
};
this.itemService.saveItem(item).subscribe(result => {
itemToView = {
...
Id: result.Data
}
}, error => {console.log(error)}
, () => { console.log('Emitting!'); this.newItemEmitter.emit(itemToView) }
}
this.closeView() // Was not originally included. (1)
}
// this.newItemEmitter.emit(itemToView) // If emitting from
// here, itemToView will not contain the right Id from the backend.
Я намеренно пропустил некоторые изнеактуальный html.
parent.html
<ng-template let-c="close" let-d="dismiss">
<fixed-item (newItemEmitter)="addNewItemToView($event)" (closed)="closeAddNewItemTemplateView()">
</fixed-item>
</ng-template>
parent.ts
addNewItemToView($event) {
console.log('Received event from child: ', $event)
// Add to view here
}
Мой ожидаемый вывод - Emitting! , за которым следует Полученное событие от потомка , но на данный момент единственным выходом является Emitting! .
Редактировать: (1): Удаление this.closeView () решило проблему для меня.Я думаю, что проблема заключалась в том, что событие было прервано, поскольку шаблон ng закрыт.