Angular 如何在两个子组件之间进行通信？

我对angular 2很陌生。两个组件之间的通信有问题。当我有一个包含父组件和一些子组件的布局时，使用@Input注释设置子组件的变量很容易

但现在我有了一个父组件（主要用于布局）和两个子组件的布局：

子组件2有一组按钮，只创建一条简单的消息。现在我想在子组件1中显示此消息

---

我如何解决它？提前感谢

一个简单的方法是将子组件2中带有@output的输出设置为eventemitter，并在单击按钮时发出一个事件，消息作为事件的数据传递。然后，在父组件中侦听此事件，并在事件发生时更新设置为子组件1输入的属性

下图是一个例子，清楚地显示了该机制

---

除了使用

@输入

/

@输出

和父组件作为“桥梁”的解决方案之外，一种常见的方法是引入共享服务。该服务需要在父组件中提供，以便子组件可以共享该服务的单个实例（）

使用的基本示例：

儿童部分2：

export class ChildComponent2 {

    constructor(private sharedService: SharedService) { }

    ngOnInit(): void {
        this.sharedService.messageSource.subscribe((message) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
    }
}

---

另请参见：

您可以使用

@ViewChild

和

@Output

更新子组件中的属性

或者，您可以使用

@Input

代替

@ViewChild

seidme建议的方法也可以很好地工作。这取决于您的用例

使用

@ViewChild

和

@Output

的示例：

使用

@输入

和

@输出

---

您可以使用模板变量引用同级：

请发布一些代码，演示您试图实现的目标。您需要使用共享服务。更多信息@user1078685他可以，他不需要。可视化效果很好，但代码也应该作为文本添加到问题中，以便于搜索和复制。现在您有三个紧密耦合的组件。一般吧，我无法给你足够的票数。解释得很好。感谢您。+1的图表如此清晰地解释了数据流。尽管根据上下文，共享服务可能是首选答案。一场闪电战将是无价的。看起来是最简单的方法。感谢plunker样品，以便更好地理解。现在它可以很好地实现我所寻找的功能，但我无法克服这个错误：没有将“exportAs”设置为“#child1”的指令。你能帮我一下吗？那么你可能有不同的代码。也许是

=

附近的一些

#孩子

？天哪。。。帕格将“搜索表单（#search）”转换为“”））它只适用于兄弟姐妹。大多数情况下，组件之间的距离更远，共享服务是一种更通用的解决方案。它无处不在。但我也喜欢这种适用的方法。面对一个小问题。“页面加载时以及路由更改时都会出现消息警报。@PankajGarg这是因为订阅时的BehaviorSubject返回其持有的最后一个值。如果您不希望在订阅时发出该值，则Change BehaviorSubject with Subject会返回该值。这现在就可以很好地工作了。”。谢谢！还有一个问题，第一次单击现在没有响应。第二次单击后，它工作正常。

export class ChildComponent1 {

    constructor(private sharedService: SharedService) { }

    sendMessage(): void {
        this.sharedService.messageSource.next('Hello from child 1!');
    }
}

export class ChildComponent2 {

    constructor(private sharedService: SharedService) { }

    ngOnInit(): void {
        this.sharedService.messageSource.subscribe((message) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
    }
}