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

Question

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

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

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

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

然后要访问组件中的数据，注入(inject)服务并使用如下方法:

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

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