Как получить данные о двух дочерних компонентах?

Question

Концептуально У меня есть следующие настройки:

AppComponent 
     |  \ 
     |  \ 
     | FeedbackComponent 
     | 
Router-Outlet 
     | 
SearchComponent 

Идея заключается в том, что при попытке обеспечить обратную связь с помощью FeedbackComponent будет собирать текущее состояние веб-приложение и отправить его на сервер. Я хотел бы собрать из SearchComponent последний поиск, который он выполнил.

В AppComponent, у меня есть:

constructor(private router: Router) {} 

И в представлении AppComponent где я использую обратную связь, у меня есть:

<feedback [router]="router"></feedback> 

С FeedbackComponent, я могу затем получить имя из в настоящее время «маршрутизируемый» компонент с this.router.currentInstruction.component.componentType.name (это возвращает строку «SearchComponent»). Однако componentType является конструктором объекта, который в настоящий момент указывает маршрутизатор, а не экземпляр этого объекта. Поскольку у меня нет экземпляра, я не могу запросить SearchComponent для его последнего поиска, не делая этот статический запрос (который я не хочу делать, он ломает другие вещи).

Угловой 1 имел $broadcast и $emit, но у углового 2, похоже, нет замены.

Если бы я не загружу SearchComponent используя маршрутизатор-выход, то я мог бы использовать @Output() и @Input() передать вещи между ними через AppComponent, но я не думаю, что я мог бы сделать эту работу с маршрутизатором таким образом.

Как может экземпляр моего запроса FeedbackComponent запрашивать данные из экземпляра моего SearchComponent?

Я сохраняю в курсе Angular2.0.0-beta.13

Answer 1

Angular2 это с помощью Services с Dependency Injection для связи между компонентами (вы можете также передать основные данные от родителя к ребенку с помощью @input)

Итак, вы хотите создать службу, @Inject служба в SearchComponent установить некоторые данные в службе (комплект .. функция), то @Inject служба в FeedbackComponent и получить данные (получить ... функция)

Answer 2

Услуги:

import {Injectable, EventEmitter} from "@angular/core";  

@Injectable() 
export class DataService { 
onGetData: EventEmitter = new EventEmitter(); 

getData() { 
    this.http.post(...params).map(res => { 
    this.onGetData.emit(res.json()); 
    }) 
} 

Компонент:

import {Component} from '@angular/core';  
import {DataService} from "../services/data.service";  

@Component() 
export class MyComponent { 
    constructor(private DataService:DataService) { 
    this.DataService.onGetData.subscribe(res => { 
     (from service on .emit()) 
    }) 
    } 

    //To send data to all subscribers from current component 
    sendData() { 
    this.DataService.onGetData.emit(--NEW DATA--); 
    } 
}