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

Question

我刚开始玩 angular 2，但遇到了一个小问题，我搜索了各种形式和 angulars 文档。

我已经成功创建了一个调用服务，然后当我按下按钮加载另一个带有动态加载组件的组件并可以访问 ajax 结果时，我想要一个组件。

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

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

Answer 1

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

我希望这张图片能为您阐明本案例的数据流向。

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

3. 您的子组件应该订阅您在上一步中准备的模型。

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

   }

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

新研究：

还有另一种方法可以通过来自 api 的数据来填充组件。您可以使用EventEmitter 从服务中发出事件，然后，您可以在您创建的组件中订阅此事件，这样他们就会得到一个数据，每次都会调用服务。这是第一个答案中这种策略的一个很好的例子。 Service Events

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

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

完整的 example/plunker 可以在这里找到：http://plnkr.co/edit/TR7cAqNATuygDAfj4wno?p=preview