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问题的非常详细的解释。