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

Question

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

例如，在下图中，No 1是消息中心组件。 No 2是消息列表组件，它通过选择器<message-list [messageList] =“ mails”>从No 1组件的html中调用。

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

Answer 1

您可以在带有Message服务的服务中使用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);

它将自动更新数据。 希望对您有所帮助。

Answer 2

我已经通过调用组件3中的EventEmitter完成了通知工作。为了对组件3中的某些操作在组件1中进行操作，我通知了组件2，因为它是组件3的直接父级，并通知了其父组件1。凌乱但更容易。