I am working with a parent and a child component in my project. The parent component functions as a page, while the child component needs to perform some cleanup tasks related to the database.
My expectation is that when I close the parent page/component, the order of execution should be:
child ngOnDestroy -> child cleanWork -> parent ngOnDestroy.
However, in reality, the sequence looks like this:
child ngOnDestroy -> parent ngOnDestroy.
// parent
@Component({
selector: 'parent',
template: `
<child
(cleanWork)="onCleanWork()">
</child>
`
})
export class ParentComponent {
ngOnDestroy() {
console.log('parent ngOnDestroy');
}
onCleanWork() {
console.log('child cleanWork');
// dispatch an action, or do something with database
}
}
// child
@Component({
selector: 'child',
template: `Hi`
})
export class ChildComponent {
@Output() cleanWork = new EventEmitter();
ngOnDestroy() {
console.log('child ngOnDestroy');
this.cleanWork.emit(null);
}
}
The reason I have chosen to handle the cleanup work within the child component is because I want to keep the child component dumb. Are there any alternative or better approaches for achieving this? Thank you