Question

我正在尝试从服务器获取答案时导航到新页面：

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

但由于某种原因'this'不是指向组件的指针，但它是订阅。有人知道问题的原因吗？

Answer 1

我认为你应该在调用http帖子之前缓存这个变量，因为在订阅者中这指的是订阅者本身。

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不会将组件类实例作为参数

this._router.navigate(link);

无效。

它需要一系列路由名称

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

另见https://angular.io/docs/ts/latest/api/router/Router-class.html

在订阅功能中无法访问此组件

2 个答案: