在Angular中,数据从子组件传递到父组件的常见方法是通过事件触发。以下是解决“Angular数据从子组件传递到父组件无响应”的步骤和示例代码:
// 子组件的代码
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`,
})
export class ChildComponent {
@Output() dataEvent = new EventEmitter();
sendDataToParent() {
const data = 'Hello from child component';
this.dataEvent.emit(data);
}
}
从子组件接收的数据:{{ receivedData }}
// 父组件的代码
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
从子组件接收的数据:{{ receivedData }}
`,
})
export class ParentComponent {
receivedData: string;
receiveDataFromChild(data: string) {
this.receivedData = data;
}
}
通过以上步骤,子组件可以将数据传递给父组件,并在父组件中进行处理和显示。
上一篇:Angular数据传输和使用
下一篇:Angular数据服务被调用两次