Angular2 Observable Rxjs如何調用私有函數

Question

好吧，我是RxJs的新手，今天才介紹..所以這是一個完全新手的問題。

我的用例是提取XML RSS提要並將它們轉換爲JSON提要。

我有具有以下

getFeedContent(url: string) : Observable<Feed> { 
    return this.http.get(url) 
     .map(this.extractFeeds) 
     .catch(this.handleError); 
} 

private extractFeeds(res: Response) { 
    let content = res.text; 
    let feed = this.extractItems(content); 
    return feed ; 
} 

提取項目是一個普通的函數，它在Takens的內容並執行XML解析，以構建JSON對象FeedService。有多種其他的方法

這裏是代碼

private extractItems(content) : Feed { 
    console.log(content); 
    let f = this.getFeedInfo(content); 
    return { 
     status: "ok", 
     feed : f , 
     items: this.getItems(content.toString(), 'item') 
        .concat(this.getItems(content.toString(), 'entry')) 
    } 
} 

當我運行這段代碼我收到此錯誤：

feed.service.ts：144個this.extractItems是不是一個函數

我可能將Observable與常規函數調用混合在一起，我需要幫助。 如何使用XML內容作爲輸入調用extractItems。

謝謝，

Answer 1

該問題源於'this'上下文。當試圖使用this.extractItems（）時，'this'的上下文位於observable而不是類中。

嘗試這樣：

let extractFeeds = (res: Response) => { 
    let content = res.text; 
    let feed = this.extractItems(content); 
    return feed; 
} 

您可能需要從rxjs進口的爲好。

通過使用箭頭符號，您將不會有一個'this'的observable和上下文中的調用方法將工作。

Answer 2

這裏的問題是如何處理this這個難題的不同部分。打字稿編譯器將產生以下的javascript：

YourComponent.prototype.getFeedContent = function (url) { 
    return this.http.get(url) 
     .map(this.extractFeeds) 
     .catch(this.handleError); 
}; 
YourComponent.prototype.extractFeeds = function (res) { 
    var content = res.text; 
    var feed = this.extractItems(content); 
    return feed; 
}; 
YourComponent.prototype.extractItems = function (content) { 
    console.log(content); 
    var f = this.getFeedInfo(content); 
    return { 
     status: 'ok', 
     feed: f, 
     items: this.getItems(content.toString(), 'item') 
      .concat(this.getItems(content.toString(), 'entry')) 
    }; 
}; 

現在，有了這個代碼的主要需要注意的是，當.map()操作者調用extractFeeds()功能，它是在可觀察由this.http.get()調用返回，沒有上下文在您的組件的上下文中。因此，extractFeeds()函數this指向Observable，並且試圖調用this.extractItems()明顯失敗，因爲Observable上沒有這樣的方法。

所以，修復它其實很簡單。所有你需要做的是改變extractFeeds（）聲明如下：

getFeedContent(url: string): Observable<Feed> { 
    return this.http.get(url) 
     .map(this.extractFeeds) 
     .catch(this.handleError); 
} 

private extractFeeds = (res: Response) => { // <-- using arrow syntax 
    let content = res.text; 
    let feed = this.extractItems(content); 
    return feed ; 
} 

private extractItems(content) : Feed { 
    console.log(content); 
    let f = this.getFeedInfo(content); 
    return { 
     status: "ok", 
     feed : f , 
     items: this.getItems(content.toString(), 'item') 
        .concat(this.getItems(content.toString(), 'entry')) 
    } 
} 

這次打字稿編譯器生成以下代碼：

var YourComponent = (function() { 
    function YourComponent(http) { 
     var _this = this; 
     this.http = http; 
     this.extractFeeds = function (res) { // this is how it is defined now in JS 
      var content = res.text; 
      var feed = _this.extractItems(content); 
      return feed; 
     }; 
    } 
    // ... rest declarations skipped 
    return YourComponent; 
}()); 

看看TSC在這裏做？它保存參考您的組件到_this變量，並用它來調用內部extractFeeds()extractItems()功能。這樣this指針在你的代碼的打字稿版本將在實際JavaScript代碼總是點內extractFeeds()功能的組件實例無論在哪裏this點。

同去到被稱爲以同樣的方式，例如所有其他功能，在的HandleError代碼。

您可以在Typescript here中找到關於this問題的非常詳細的解釋。