Angular2 this 在组件中为空 [英] Angular2 this is null in component

问题描述

我期待一些奇怪的情况，其中this"在组件内为空.到目前为止，我在两种情况下看到它:

I'm expecting some weird situations where "this" is null inside a component. SO far, I saw it in two situations:

1) 当承诺被拒绝时:

if (this.valForm.valid) {
            this.userService.login(value).then(result => {
                if(result.success){
                    this.toasterService.pop("success", "Exito", "Inicio de session correcto");
                    this.sessionService.setUser(result.data);
                    this.router.navigateByUrl('home');
                }
                else{
                    this.error = result.code;
                }
            },function(error){
                console.log("ERROR: " + error);
                this.error = "ERROR__SERVER_NOT_WORKING";
                console.log(this.error);
            });
        }

在函数(错误)中这是空的所以我不能分配相应的错误.

In the function(error) this is null so I cannot assign the corresponding error.

该服务的工作方式如下:

The service is working in the following way:

  login(login : Login) : Promise<Response> {
      return this.http
      .post(this.serverService.getURL()  + '/user/login', JSON.stringify(login), {headers: this.headers})
      .toPromise()
      .then(res => res.json())
      .catch(this.handleError);
  }

    private handleError(error: any): Promise<any> {
      console.log('An error occurred', error); // for demo purposes only
      return Promise.reject(error.message || error);
    }

所以这个值在服务handleError被调用时丢失了.

So the this value is lost when the service handleError is called.

2) - 使用 sweetalert

2) - Using sweetalert

logout(){
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
            }).then(function() {
                this.sessionService.clearSession();
                this.router.navigateByUrl('login');
        }, function(){
            //Cancel
        });
    }

在这里，当我确认并尝试执行 clearSession 时，它被调用，这是空的.

Here when I confirm and I try to execute the clearSession is called, this is null.

我不知道它们是两个不同的问题，还是由同一个问题引起的.

I don't know if they are two different issues or if both are cause by the same issue.

推荐答案

使用 () =>{}(ES6 箭头函数)作为回调，以便 this 引用组件，作为 箭头函数不创建自己的this上下文:

Use () => {} (ES6 arrow function) as a callback in order for this to refer to the component, as the arrow function does not create its own this context:

this.userService.login(value).then(
    (result) => {
        this.toasterService.pop("success", "Exito", "Login successful!");
    }, 
    (error) => {
        // now 'this' refers to the component class
        this.error = "SERVER_ERROR";
    }
);

不过，如果您想使用 function(){}，您可以bind 组件的this 上下文到回调函数如下:

Still, if you want to use function(){}, you can bind component's this context to the callback function as following:

this.userService.login(value).then(
    function(result) {
        this.toasterService.pop("success", "Exito", "Login successful!");
    }.bind(this), 

    function(error) {
        // now 'this' refers to the component class
        this.error = "SERVER_ERROR";
    }.bind(this)
);

同样应该适用于您的第二个用例.

The same should be applied for your second use case.

这篇关于Angular2 this 在组件中为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！