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

【问题标题】：Communication between nested multiple components in Angular2Angular2中嵌套多个组件之间的通信
【发布时间】：2018-12-13 17:19:41
【问题描述】：

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

例如，在下图中，No 1 是消息中心组件。 No 2 是 message-list 组件，通过 selector 从 No 1 组件的 html 调用。

No 3 是一个 message-detail 组件，其父级为 No 2。现在在 No 3 组件中，如果我们从 Inbox 中删除一条选定的消息，则该消息也将从第 2 号和第 1 号的消息列表组件中删除组件，标记为 no 的“Deleted”也将更改为“Deleted(1)”。现在我们如何更改 2 级嵌套子组件中的更改事件的多个父级，即第 3 级？

【问题讨论】：

我可以建议你使用 NgRx 来管理你的状态。这并不容易，但是一旦你掌握了它，你的开发流程就会容易得多。这个问题可以通过 NgRx/store 轻松解决
你可以使用rxjs主题或者使用ngrx/store或者ngrx/redux

标签： javascript angular typescript components

【解决方案1】：

您可以在服务中使用BehaviorSubject，例如消息服务（如果您，请不要忘记添加do rxjs 运算符：

 @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));
     }
 }

然后在组件中访问您的数据，注入服务并使用如下方法：

 msgService.$messages.subscribe(messages => this.messages = messages); // update data each time next is called
 msgService.getMessages().subscribe(); // do the http call

然后，当您删除一条消息时，您只需要使用 next 更新列表：

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

它会自动更新数据。希望对你有帮助。

【讨论】：

使用这个方法的时候，组件销毁的时候别忘了unsubscribe:)

【解决方案2】：

我已经通过在组件 3 中调用 EventEmitter 来完成通知工作。为了在组件 1 中为组件 3 中的某些操作执行操作，我通知组件 2，因为它是组件 3 的直接父组件，以通知其父组件1. 看起来有点乱，其实比较简单。

【讨论】：