在Angular中,可以通过使用@Output装饰器和EventEmitter类来将数据从子组件传递给父组件。下面是一个示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Data received from child: {{ receivedData }}
`
})
export class ParentComponent {
receivedData: string;
receiveData(data: string) {
this.receivedData = data;
}
}
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
@Output() dataEvent = new EventEmitter();
sendData() {
const data = 'Hello from child component!';
this.dataEvent.emit(data);
}
}
在父组件中,我们使用@Output装饰器和EventEmitter类创建了一个名为dataEvent的输出属性。然后,我们在子组件的sendData方法中触发了dataEvent事件,并将数据作为参数传递。在父组件中,我们通过在子组件标签上使用(dataEvent)="receiveData($event)"语法来监听并接收子组件传递的数据。receiveData方法将接收到的数据存储在receivedData属性中,并可以在父组件的模板中进行显示。
这样,当点击子组件中的"Send Data"按钮时,数据将从子组件传递到父组件,并在父组件中显示出来。