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?

Answer 1

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

Answer 2

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