Angular2: невозможно передать данные другому компоненту. Бэкэнд-сервис называется дважды

Question

У меня есть требование, где ngOnInit, я извлекаю параметры запроса из URL-адреса, подготавливаю URL для того, чтобы сервер * api вызывал что-то вроде http://localhost:8080/myapp/video0=5&video1=6, и отправлял полученные данные для использования в другом компоненте.

Теперь, когда я просматриваю консоль браузера и вкладки сети, я вижу два вызова моего API api-интерфейса: один без параметров и один с параметрами. Очевидно, что один с параметрами выбирает мне нужные данные. Это data требуется в другом компоненте для дальнейшей обработки.

Вот как ngOnInit выглядит в одном компоненте:

ngOnInit() {

this.activatedRoute.queryParams.subscribe((params: Params) => {
     this.video0 = params['video0'];
     this.video1 = params['video1'];
     this.video2 = params['video2'];
     this.video3 = params['video3'];

    this.sharedRequestPath = this.prepareSharedLinkRequestPath(this.video0,this.video1,this.video2,this.video3);  // creates a url for fetching data.

   this.getSharedVideosData(this.sharedRequestPath);  //this makes the backend call.

    this.addVideosEvent.emit(this.sharedVideos); //finally emitting the data populated in variable

 });
}

Часть для извлечения данных из бэкэнда: getSharedVideoData

 getSharedVideosData(requestPath) {

  this.modelService.getVideos(requestPath).subscribe(
      data => {
      this.videoData = data;

            for (let j = 0; j < this.videoData.length; j++) {
                          this.sharedVideos[j] = this.videoData[j];
            }
      });  
   }

getVideos метод в modelService:

getVideos(videoDataQuery): Observable < MyObj[] > {
    return this.http.get(videoDataQuery).map((response: Response) => {
        return <MyObj[]> response.json()
    }).catch(this.handleError);
}

И, наконец, событие emitter для другого компонента:

 <app-form (addVideosEvent)="addVideos($event)" ></app-form>

Метод

addVideos используется для дальнейшей обработки данных, содержащих оператор оповещения. Когда страница загружается, я вижу два предупреждения, но оба без данных.

Это странно, потому что вкладки сети браузера показывают мне ответ, но он не выдается должным образом, я думаю. Я делаю это правильно?

Как мне этого добиться?

Answer 1

• Правильный синтаксис для компонента подписка = = *

  this.addVideosEvent.subscribe(yourEmittedData=>{
      console.log( 'emittedData' , yourEmittedData )
  

  } )

• Правильный синтаксис для службы подписка: =>

   myFunction(callback:(data:any)=>void){
       this.addVideosEvent.subscribe((yourEmittedData:any)=>{
       console.log( 'emittedData' , yourEmittedData )
      callback(yourEmittedData);
  

  } ) }

Answer 2

Просто подпишите полученные данные в Компоненте и поместите их в нужное место.

this.addVideosEvent.subscribe(yourEmittedData=>{
       console.log( 'emittedData' , yourEmittedData )
)