要在Angular 9中在销毁子组件后向父组件发送数据,可以使用@Output装饰器和EventEmitter。
以下是一个示例代码:
在子组件中,定义一个带有@Output装饰器的事件发射器:
import { Component, EventEmitter, OnDestroy } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent implements OnDestroy {
@Output() dataEvent = new EventEmitter();
sendData() {
const data = '这是从子组件发送的数据';
this.dataEvent.emit(data);
}
ngOnDestroy() {
// 在组件销毁时发送一个空数据,表示子组件被销毁了
this.dataEvent.emit('');
}
}
在父组件中,监听子组件的事件并处理数据:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
{{ receivedData }}
`
})
export class ParentComponent {
receivedData: string;
handleData(data: string) {
this.receivedData = data;
}
}
在父组件的模板中,我们使用
标签来渲染子组件,并使用(dataEvent)
来监听子组件发出的事件。当子组件调用sendData()
方法时,父组件的handleData()
方法将被触发,并且子组件发送的数据将被接收并显示在父组件的模板中。
当子组件被销毁时,我们在ngOnDestroy()
方法中发送一个空数据,父组件可以通过监听这个事件来知道子组件已经被销毁了。
这就是如何在Angular 9中在销毁子组件后向父组件发送数据的解决方法。