在Angular中,子组件到父组件的交互可以通过以下几种方式解决:
子组件代码示例:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`,
})
export class ChildComponent {
@Output() dataEvent = new EventEmitter();
sendData() {
const data = '子组件向父组件传递的数据';
this.dataEvent.emit(data);
}
}
父组件代码示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
receiveData(data: any) {
console.log('父组件接收到数据:', data);
}
}
子组件代码示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`,
})
export class ChildComponent {
sendData() {
const data = '子组件向父组件传递的数据';
this.parent.receiveData(data);
}
}
父组件代码示例:
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
@ViewChild(ChildComponent) childComponent!: ChildComponent;
ngAfterViewInit() {
console.log(this.childComponent);
}
receiveData(data: any) {
console.log('父组件接收到数据:', data);
}
}
以上是两种常见的子组件到父组件交互的解决方法,根据实际需求选择适合的方式进行交互。