有角度的。发送数组数据获取Itunes API；从组件搜索到组件主，通过服务

Question

在角度 7 中。我需要将一个数组信息从包含在名为“搜索”的组件中的 Itunes Api 发送到另一个名为“目录”的组件。我知道在这种情况下，我必须使用允许在他们之间共享信息的服务。这是一些代码。怎么了？

我试过viewchild，输入，输出，但是没有结果；因为这两个组件都不是“亲戚”。

“搜索”

"search" 



import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 
    import { RequestService } from '../../services/request/request.service';
    import {DataShareService} from '../../services/dataShare/data-share.service';
    import { Music } from '../../models/music';

    @Component({
      selector: 'search',
      styleUrls: ['./ion-searchbar.component.sass'],
      templateUrl: './ion-searchbar.component.html',
      providers: [RequestService, DataShareService],
    })
    export class IonSearchBarComponent implements OnInit {
      public searchResults: Music[]; 
      public searchValue: string;

      constructor(public _requestService: RequestService, private _dataShareService: DataShareService) {}

      ngOnInit() {
    this._dataShareService.$sendDataObservable.subscribe(
      data => {
        this.searchResults = data
    })
  }

  sendData(searchResults: Music[]){
    console.log("executat");
    this._dataShareService.sendData(searchResults);
  }

  search(){
    this._requestService.getMusic(this.searchValue).subscribe(
      result => {
        this.searchResults = result.results;
        console.log(result.results);
        this.sendData(this.searchResults);
      },
      error =>{ 
        console.log(<any>error);
      }
    );
  }
}



"service"



import { Injectable } from '@angular/core';
import { Music } from '../../models/music';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataShareService {
  private _sendDataSubject = new Subject<Music[]>();
  $sendDataObservable = this._sendDataSubject.asObservable();

  constructor() { }

  sendData(data: Music[]){
    this._sendDataSubject.next(data);
    console.log(data);
  }
}



"catalog" 


import { Component, OnInit, Input } from '@angular/core';
import {RequestService} from '../../services/request/request.service';
import {DataShareService} from '../../services/dataShare/data-share.service';
import { Music } from '../../models/music';

@Component({
  selector: 'catalog',
  templateUrl: './catalog.component.html',
  styleUrls: ['./catalog.component.sass'],
  providers: [RequestService, DataShareService]
})
export class CatalogComponent implements OnInit {
  public title: any;
  public InfoLlegada: any;

  constructor(private _dataShareService: DataShareService) {}

  ngOnInit() {
    console.log(this.InfoLlegada)
    this._dataShareService.$sendDataObservable.subscribe(
      data => {
        this.InfoLlegada = data
        console.log(data);
    });

  }
}

Answer 1

不确定这是否是真正的原因，但在search 组件中的getMusic 订阅中的this 绑定存在问题。试试this.sendData.call(this, result.results);