角2转移ajax呼叫响应到另一个组件

Question

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

我已经设法使一个服务，使一个调用，然后我想在一个组件中，当我按下一个按钮加载另一个组件与Dynamicload组件，并有权访问ajax结果。

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

问题是我如何使用可观察或promise方法使结果在其他组件中可访问。

Answer 1

只需创建一个服务，然后将服务注入所需的位置。下面是一个示例，说明如何在多个组件之间共享服务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);
      }
  }
}

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

Answer 2

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

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

>

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

}

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

新研究：

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

希望它能帮助你，让我知道如果你需要更多的信息！