Question

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

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

No 3是其父级为2的消息详细信息组件。现在在No 3组件中，如果我们从收件箱中删除一条选定的消息，则此消息也将从消息列表组件的No 2和No 1中删除标记为“否”的“已删除”组件也将更改为“已删除（1）”。现在，我们如何在2级嵌套子级组件（不是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));
     }
 }

然后要访问组件中的数据，请注入服务并使用类似方法：

 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.看起来有点混乱，但更容易。

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

2 个答案: