在Angular中,子组件可以通过@Output装饰器将数据传递给父组件。下面是一个解决方法的示例代码:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
Received data: {{ receivedData }}
`
})
export class ParentComponent {
receivedData: string;
getData(data: string) {
this.receivedData = data;
}
}
子组件:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
`
})
export class ChildComponent {
@Output() dataEvent = new EventEmitter();
sendData() {
const data = 'Hello from child component';
this.dataEvent.emit(data);
}
}
在上述示例中,子组件通过@Output装饰器创建了一个名为dataEvent的事件,并用EventEmitter实例化了它。当点击“Send Data”按钮时,子组件会触发这个事件,并将数据作为参数传递给父组件。
在父组件中,我们使用(dataEvent)="getData($event)"来监听子组件的dataEvent事件,并在getData方法中接收传递的数据。然后,我们可以在模板中显示接收到的数据。
请注意,在父组件模板中的app-child标签中,我们使用(dataEvent)="getData($event)"来绑定子组件的dataEvent事件。这里的getData方法可以根据你的需求进行更改。