Angular 2將ajax調用響應轉移到另一個組件

Question

我剛剛開始玩角度2，我遇到了一個小問題，我搜索了各種形式和angulars文檔。

我設法做了一個調用服務，然後我想在一個組件中，當我按下一個按鈕加載另一個組件與dynamicload組件，並有權訪問ajax結果。

的問題是，我可以T弄清楚如何做到這一點..

的問題是，如何才能讓結果使用觀測量或承諾方法的其他組件入店。

Answer 1

如果我正確理解您的問題，您正在尋找一種方法將數據從請求插入另一個嵌套組件。

我希望這張圖片能夠爲你澄清這種情況下的數據流。

1. 根組件調用返回給你承諾對象服務的方法。
2. 然後將響應中所需的數據映射到根組件模型內的根組件模型構造函數中。

3. 並且您的子組件應該預訂您在上一步中準備的模型。

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

   }

正上方如何在根組件從承諾對象設置模式向局部模型短的例子。

最新研究：

還有另一種方式，通過從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); 
     } 
    } 
} 

一個完整的工作示例/猛擊可以在這裏找到：http://plnkr.co/edit/TR7cAqNATuygDAfj4wno?p=preview