Angular 2将ajax调用响应转移到另一个组件

Question

我刚开始使用angular 2玩，遇到一个小问题，我已经搜索了各种形式以及angular文档。

我设法提供了一个可以打电话的服务，然后当我按下按钮以使用dynamicload组件加载另一个组件并可以访问ajax结果时，我想要一个组件。

问题是我不知道该怎么做。

问题是如何使用Observables或Promises方法使结果在其他组件中可访问。

Answer 1

如果我正确理解了您的问题，那么您正在寻找一种将数据从请求插入到另一个嵌套组件的方法。

我希望此图可以为您澄清这种情况下的数据流。

1. 您的Root组件正在调用服务方法，该方法将为您返回Promise对象。
2. 然后，您可以将所需的数据从响应映射到Root Component构造函数中的组件模型。

3. 并且您的Child组件应订阅您在上一步中准备的模型。

    ngOnInit() { this.dataService.getSomeData() .subscribe((data: IData) => { this.data = data; }); 

   }

上面只是一个简短示例，说明如何在从promise对象到本地模型的根组件中设置模型。

新研究：

还有另一种方法可以通过api的数据填充您的组件。 您可以使用EventEmitter从服务中发出事件，然后可以在创建的组件内部订阅此事件，这样每次调用该服务时，它们都将获取数据。 这是第一个答案中该策略的一个很好的例子。 服务事件

希望对您有所帮助，如果您需要其他信息，请告诉我！

Answer 2

只需创建服务，然后将服务注入到所需位置即可。 这是一个示例，该示例说明了如何在多个组件之间共享服务ajax数据而不两次发出请求： https : //stackoverflow.com/a/36413003/2681823

服务：

@Injectable()
export class DataService {
    constructor(private http: Http) { }

    private _dataObs = new ReplaySubject<request>(1); 

    getData(forceRefresh?: boolean) {
    // On Error the Subject will be Stoped and Unsubscribed, if so, create another one
    this._dataObs = this._dataObs.isUnsubscribed ? new ReplaySubject(1) : this._dataObs;

    // If the Subject was NOT subscribed before OR if forceRefresh is requested
    if (!this._dataObs.observers.length || forceRefresh) {
            this.http.get('http://jsonplaceholder.typicode.com/posts/2')
              .subscribe(
                requestData => {
                  this._dataObs.next(requestData);
                },
                error => this._dataObs.error(error));
        }

        return this._dataObs;
    }
}

组件：

@Component({
  selector: 'child',
  template : `<button (click)="makeRequest()" class="btn">Click me!</button>`
}) 
export class Child {
  constructor(private _dataService: DataService) {  } 

  makeRequest() {
    this._dataService.getData().subscribe( 
      requestData => {
          console.log('ChildComponent', requestData);
      }
  }
}

可以在此处找到完整的工作示例/插件 ： http : //plnkr.co/edit/TR7cAqNATuygDAfj4wno?p=preview