在Angular中,父组件可以通过@Output装饰器和EventEmitter来向子组件传递数据。子组件可以通过@Input装饰器接收父组件传递过来的数据。以下是一个示例:
在父组件中,定义一个用于接收子组件1数据的变量,并创建一个用于传递数据给子组件2的方法:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
dataFromChild1: string;
receiveData(data: string) {
this.dataFromChild1 = data;
}
}
在子组件1中,定义一个用于发送数据给父组件的事件,并使用@Output装饰器将该事件暴露给父组件:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child1',
template: `
`
})
export class Child1Component {
@Output() dataEvent = new EventEmitter();
sendData() {
const data = 'Data from Child 1';
this.dataEvent.emit(data);
}
}
在子组件2中,使用@Input装饰器接收来自父组件的数据:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child2',
template: `
Data from Child 1: {{ data }}
`
})
export class Child2Component {
@Input() data: string;
}
在父组件的模板中,通过使用子组件1的dataEvent事件和子组件2的data属性,可以将数据从子组件1传递给父组件再传递给子组件2。