cannot access to this of component in subscribe function

Question

I'm trying navigate to new page when get answer from server:

import {Component} from '../../node_modules/angular2/core';
import {Router} from "../../node_modules/angular2/router";
import {Http, Headers, HTTP_PROVIDERS} from '../../node_modules/angular2/http'

@Component({
    selector: 'test-page',
    templateUrl:'src/login/test.html',
    providers: [HTTP_PROVIDERS]
})


export class TestPage {
    constructor(private _router:Router,
                private _http:Http) {
    }

    Test(username, password) {
        let body = 'test';
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        this._http.post('/api/test', 'test', {headers: headers})
        .subscribe(
                response => {
                    this._router.navigateByUrl('Home'); //'this' is not a component
                },
                error => {
                   console.log(error)
                }
       );
     }
}

But by some reason 'this' is not a pointer to component but it's a subscribe. Does someone know the reason of issue?

Could you also add the code around? I mean the complete function where the code is located. Thanks! — Thierry Templier, Apr 18 '16 at 08:32

score 4 · Accepted Answer · answered Apr 18 '16 at 08:43

4

I think you should cache the variable this before calling the http post, because inside the subscriber this refer to the subscriber itself.

let headers = new Headers();
var self = this;
headers.append('Content-Type', 'application/x-www-form-urlencoded');
this.http.post('/api/test', 'test', {headers: headers})
       .subscribe(
                response => {
                    self._router.navigate(link); 
                },
                error => {
                   console.log(error)
                }
       )

answered Apr 18 '16 at 08:43

mohamedHabib

196
7

3

That's redundant if you use `=>` https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Günter Zöchbauer Apr 18 '16 at 08:44
the reason was in self. Thanks a lot – Iva Apr 18 '16 at 08:53
1

Agreed with @Günter, with arrow functions, the `this` keyword should be the component instance ifself (because of lexical this). There is something strange here. I used this a lot ;-) – Thierry Templier Apr 18 '16 at 08:55
Quite unlikely that this is the solution. – Günter Zöchbauer Apr 18 '16 at 08:57
1

I added (respone=>{...}).bind(this) – Iva Apr 18 '16 at 09:02
1

I have the same error - looks like after transpilation arrow function gets replaced with `function` – Pavel Agarkov Jul 03 '18 at 12:58

score 0 · Answer 2 · answered Apr 18 '16 at 08:36

0

Router.navigate doesn't take a components class instance as a parameter

this._router.navigate(link);

Is invalid.

It requires an array of route names

this._router.navigate(['MyRoute']);

See also https://angular.io/docs/ts/latest/api/router/Router-class.html

answered Apr 18 '16 at 08:36

Günter Zöchbauer

623,577
216
2,003
1,567

1

I cannot take this._router at all – Iva Apr 18 '16 at 08:44
2

Hard to tell because your question doesn't contain enough code. In your constructor you need `constructor(private _router:Router) {}`. – Günter Zöchbauer Apr 18 '16 at 08:46
1

Try adding `console.debug(this._router);` to your constructor to check if an instance is actually passed in. You can't inject `Router` in components that don't have routes. Instead inject `Router` to a global service and inject this service to your component. – Günter Zöchbauer Apr 18 '16 at 08:52

cannot access to this of component in subscribe function

2 Answers2

Linked