Angular2 - 關於功能範圍

Question

我有麻煩時，我讓我的Angular2樣品與HTTP模塊， 問題我基本上這樣（短樣品）成分：

app.loginComponent = 
    ng.core.Component({ 
     selector: 'login', 
     templateUrl: 'app/login/login.html', 
     providers:[lazyResolveService(['app.loginService'])] 
    }).Class({ 
     constructor: [ 
      ng.http.Http, 
      lazyResolveService(['app.loginService']), 
      function (http,service) { 
       this.result = 'hello world'; 
       this.httpService = http; 
       this.loginService = service; 
       // this.loginService = app.loginServiceInjector.get(app.loginService); 
      } 
     ], 

     login: function (username) { 
      //this.loginService.printName(username); 
      this.httpService.get('http://localhost:8080/xxx/login') 
        .map(function (res) { 
         var str2 = JSON.parse(res._body); 
         return str2.message.securityMessage; 
        }) 
        .subscribe(function (res) { 
         console.log(res); 
         console.log(this.result); 
         return this.result = res; 
        }); 
      console.log(this.result); 
     } 
    }); 

所以，這只是我的組件的一個片段。而且我在登錄功能中訪問局部變量時遇到了問題。 正如看到，當代碼運行如下功能：

    subscribe(function (res) { 
         console.log(this.result); 
         return this.result = res; 
        }) 

它得到的結果：「取消定義」，因此，這意味着「this.result」是取消定義，和的範圍「this.result」不是在loginComponent的構造函數。 那麼如何在這種情況下訪問局部變量？

Answer 1

好的，當我查看Angular2資源代碼時，我得到了一些啓發，我應該更好地使用關鍵詞'this'。所以我改變了我的代碼如下：

constructor: [ 
     ng.http.Http, 
     lazyResolveService(['app.loginService']), 
     function (http,service) { 
      var _self = this; 
      _self.result = 'hello world'; 
      _self.httpService = http; 
      _self.loginService = service; 
      // this.loginService = app.loginServiceInjector.get(app.loginService); 
     } 
    ], 

    login: function (username) { 
     //this.loginService.printName(username); 
     _self.httpService.get('http://localhost:8080/xxx/login') 
       .map(function (res) { 
        var str2 = JSON.parse(res._body); 
        return str2.message.securityMessage; 
       }) 
       .subscribe(function (res) { 
        console.log(res); 
        console.log(_self.result); 
        return _self.result = res; 
       }); 
     console.log(_self.result); 
    } 

最後我得到了我想要的。

Answer 2

改變你的訂閱回調添加binded方法

.subscribe(function (res) { 
         console.log(res); 
         console.log(this.result); 
         return this.result = res; 
        }.bind(this));