Связь между несколькими вложенными компонентами в Angular2

Question

Я делаю проект Angular2 с несколькими вложенными компонентами. Мне удалось отправить некоторые данные из непосредственного дочернего компонента в непосредственный родительский компонент. Но в случае трех вложенных компонентов, как я могу изменить или отправить данные нескольким родительским компонентам?

Например, на следующем рисунке № 1 является компонентом центра сообщений. № 2 - это компонент списка сообщений, который вызывается из html-компонента № 1 через селектор .

№ 3 - это компонент детализации сообщения, родительским элементом которого является № 2. Теперь в компоненте № 3, если мы удалим одно выбранное сообщение из папки «Входящие», это сообщение также будет удалено из компонента списка сообщений, который имеет значение № 2 и № 1 компонент «Удалено», помеченный как no, также будет изменен на «Удален (1)». Теперь, как мы можем изменить нескольких родителей для события изменения во вложенном дочернем компоненте 2 уровня, который имеет номер 3?

Answer 1

Я выполнил уведомляющую работу, вызвав EventEmitter в компоненте 3. Чтобы выполнить действие в компоненте 1 для какого-либо действия в компоненте 3, я уведомил компонент 2, поскольку он является непосредственным родителем компонента 3, чтобы уведомить родительский компонент 1. Кажется, что это немного грязно, но это проще.

Answer 2

Вы можете использовать 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

затем, когда вы удаляете сообщение, вам просто нужно обновить список, используя следующее:

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

Это автоматически обновит данные. Надеюсь, это поможет.