Javascript Angular2中嵌套的多个组件之间的通信

我正在做一个包含嵌套多个组件的Angular2项目。我设法将一些数据从直接子组件发送到直接父组件。但在3个嵌套组件的情况下，如何更改或向多个父组件发送数据

例如，在下图中，No 1是消息中心组件。No 2是消息列表组件，它是通过选择器从No 1组件的html调用的

No 3是其父级为No 2的消息详细信息组件。现在，在No 3组件中，如果我们从收件箱中删除一条选定的邮件，该邮件也将从邮件列表组件的No 2中删除，在No 1组件中，标记为No的“deleted”也将更改为“deleted（1）”。现在，我们如何在2级嵌套子组件（3级）中更改更改事件的多个父级

您可以在服务中使用，例如消息服务（如果您：

 @Injectable()
 export class MessageService {
     public $messages: BehaviorSubject<Message[]> = new BehaviorSubject<Message[]>([]);
     public getMessages() {
        const url = 'your url';
        return this.http.get(url).do(messages => this.$messages.next(messages));
     }
 }

然后，删除邮件时，只需使用下一步更新列表：

const newList = this.messages.filter(message => message.id !== deletedMessage.id);
msgService.$messages.next(newList);

它将自动更新数据。

---

我希望它能有所帮助。

我已经通过调用组件3完成了通知工作。要在组件1中为组件3中的某些操作执行操作，我通知组件2，因为它是组件3的直接父组件，通知它的父组件1。这看起来有点混乱，但更容易。

我可以建议您使用NgRx来管理您的状态。这并不容易t一旦你掌握了它，你的开发流程就会容易得多。这个问题可以通过NgRx/store轻松解决。你可以使用rxjs主题或使用NgRx/store或NgRx/Redux使用此方法时，不要忘记在组件被销毁时：）

const newList = this.messages.filter(message => message.id !== deletedMessage.id);
msgService.$messages.next(newList);