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。凌亂但更容易。