Angular2:导出自定义HTTP请求类

我用Angular 2编写了一个小小的HTTP请求类：

http-handler.ts

import {Http, Headers, RequestOptions} from 'angular2/http'
import {Injectable} from 'angular2/core';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class HttpHandler {

    constructor(private http: Http) { }

    post(url, _body) {
        let body = JSON.stringify(_body);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(url, body, options)
            .toPromise()
            .then(res => res.json())
    }

    get(url) {
        return this.http.get(url)
            .toPromise()
            .then(res => res.json())
    }
}

我想将其用于引导的文件：

login.component.ts

import {Component} from 'angular2/core';
import {Http, Headers, RequestOptions} from 'angular2/http'

import {HttpRequest} from './http-handler'

import 'rxjs/add/operator/toPromise';

@Component({
    selector: 'loginForm',
    template:`<some html>`,
})

export class LoginComponent extends HttpRequest {

    login(event) {
        var credentials = {
            "username": this.username, // username put in a form
            "password": this.password  // password put in a form
        }

        this.post('http://localhost/login', credentials) // method from http-handler.ts file
            .then(result => {
                if (result.correct) {
                    sessionStorage.setItem('username', this.username);
                    window.location = 'welcome.html';
                    event.preventDefault();
                    return false;
                }
                else {

                }
            })

    }
}

login.component.ts
从'angular2/core'导入{Component}；
从'angular2/Http'导入{Http，头，请求选项}
从“./http处理程序”导入{HttpRequest}
导入“rxjs/add/operator/toPromise”；
@组成部分({
选择器：“loginForm”，
模板：``，
})
导出类LoginComponent扩展了HttpRequest{
登录（事件）{
变量凭据={
“username”：this.username，//输入表单中的用户名
“password”：这个。password//密码放在表单中
}
这是一篇文章http://localhost/login“，凭据）//来自http-handler.ts文件的方法
。然后（结果=>{
如果（结果正确）{
setItem（'username'，this.username）；
window.location='welcome.html'；
event.preventDefault（）；
返回false；
}
否则{
}
})
}
}

---

现在我得到的只是http handler.ts中的一个错误：

this.http未定义。当我将http handler.ts

中的所有方法粘贴到login.component.ts时，代码工作得非常好。你知道什么是错误的吗？

但是为什么要这样做呢

如果你想改变标题，你可以这样做

export类baseRequestOption扩展了BaseRequestOptions{
构造函数（私有的_authService？：authService）{
超级（）；
var token=此。_authService.token；
如果（令牌）{
此.headers.set（“授权”、“承载人”+令牌）；
this.headers.set（“内容类型”、“应用程序/json”）；
}否则{
this.headers.set（“内容类型”、“应用程序/json”）；
}
}
}
@可注射（）
导出类BaseHttpService{
http:http；
构造函数（http:http，private\u authService:authService）{
this.http=http；
this.http.\u defaultOptions=newbaserequestoption（this.\u authService）；
}
}

但这样做的原因是什么

如果你想改变标题，你可以这样做

export类baseRequestOption扩展了BaseRequestOptions{
构造函数（私有的_authService？：authService）{
超级（）；
var token=此。_authService.token；
如果（令牌）{
此.headers.set（“授权”、“承载人”+令牌）；
this.headers.set（“内容类型”、“应用程序/json”）；
}否则{
this.headers.set（“内容类型”、“应用程序/json”）；
}
}
}
@可注射（）
导出类BaseHttpService{
http:http；
构造函数（http:http，private\u authService:authService）{
this.http=http；
this.http.\u defaultOptions=newbaserequestoption（this.\u authService）；
}
}

导出类

HttpHandler

，但导入

HttpRequest

？-这可能是一个输入错误，但是尝试使用

（受保护的http:http）

将构造函数添加到

LoginComponent

，并将

HttpHandler

-构造函数的http参数更改为

protected

，同时导出类

HttpHandler

，但导入

HttpRequest

？-这可能是一个输入错误，但是尝试使用

（受保护的http:http）

将构造函数添加到

LoginComponent

，并将

HttpHandler

-构造函数的http参数也更改为

受保护的