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);
}

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

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

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

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

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

Answer 1

Просто подпишитесь на эти данные в Компоненте и разместите их там, где вы хотите.

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

Answer 2

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

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

  })

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

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

  })}