要实现从一个子组件到父组件,然后再传递给另一个子组件的通信,可以使用Angular的@Output()和EventEmitter()来实现。
首先,在第一个子组件中,定义一个@Output()属性,用来将数据传递给父组件。然后创建一个EventEmitter实例,用于触发事件,并将数据传递给父组件。
子组件代码示例:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child1',
template: `
`,
})
export class Child1Component {
@Output() messageEvent = new EventEmitter();
sendMessage() {
const message = 'Hello from Child1';
this.messageEvent.emit(message);
}
}
接下来,在父组件中,监听子组件的事件,并获取传递的数据。然后,将数据传递给第二个子组件。
父组件代码示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
receivedMessage: string;
receiveMessage(message: string) {
this.receivedMessage = message;
}
}
最后,在第二个子组件中,通过输入属性接收来自父组件的数据,并在模板中使用它。
第二个子组件代码示例:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child2',
template: `
收到的消息:{{ message }}
`,
})
export class Child2Component {
@Input() message: string;
}
这样,当第一个子组件的按钮被点击时,它会将消息发送给父组件,父组件接收到消息后,通过输入属性将消息传递给第二个子组件,第二个子组件就可以在模板中显示收到的消息了。