Question

当我使用http模块制作Angular2示例时，我遇到了麻烦，我基本上有这个（短样本）组件：

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;
                    })

它得到了一个结果：＆＃39;取消定义＆＃39;，这意味着＆＃39; this.result＆＃39;是不确定的，＆＃39; this.result＆＃39;不在loginComponent的构造函数中。那么在这种情况下如何访问局部变量呢？

Answer 1

好的，当我查看Angular2资源代码时，我得到了一些灵感，我应该使用关键词＆＃39;这个＆＃39;更好。所以我改变了我的代码如下：

    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));

Angular2 - 关于功能范围的问题

2 个答案: