Http 在angular 2中登录

我是一名实习前端开发人员，试图通过Angular 2为自己铺平道路。这个项目涉及一个简单的登录屏幕，我无法进入工作。我尝试过各种解决这个问题的方法，但根本不起作用。 我不断地犯我似乎无法摆脱的错误。这次是“评估“提交”时出错”。 “无法阅读未定义的属性‘post’。我在这个问题上工作了几天，但一无所获。任何帮助都将不胜感激

我有一个LoginService、一个LoginComponent和一个login.html

login.html：

<div id="login-container" class="center-block">
<form role="form" (submit)="login($event, username.value, password.value)">
    <div class="form-group text-left">
        <label for="username">Username</label>
        <input type="text" 
        #username class="form-control" 
        id="username" 
        placeholder="Gebruikersnaam">
    </div>
    <div class="form-group text-left">
        <label for="password">Password</label>
        <input type="password"
        #password class="form-control" 
        id="password" placeholder="Paswoord">
    </div>
    <div class="form-group text-left">
        <input type="checkbox" id="login-remember">
        <button type="submit" id="btn-login"
        class="btn btn-default">Submit</button>
    </div>
</form>
</div>

登录服务：

import { Component, View } from 'angular2/core';
import {RouteConfig, Router, RouterLink, RouterOutlet, Http} from 'angular2/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
import { Http, Headers } from 'angular2/http';
import { contentHeaders } from '../common/headers';


export class LoginService {

  constructor(public router: Router, public http: Http) {
  }

  login(event, username, password) {
    event.preventDefault();
    let body = JSON.stringify({ username, password });
    this.http.post('http://localhost:3000/sessions/create', body, { headers: contentHeaders })
      .subscribe(
        response => {
          localStorage.setItem('jwt', response.json().id_token);
          this.router.parent.navigateByUrl('/actuals');
        },
        error => {
          alert(error.text());
          console.log(error.text());
        }
      );
  }
}

---

您需要将

http

实例注入

LoginCmp

组件：

export class LoginCmp {
  constructor(private http:Http) {
  }
}

这将修复您的错误：“无法读取未定义的属性‘post’。”

我看到您为登录处理实现了一项服务，您可以利用它：

@Component({
  (...)
  providers: [ LoginService ]
})
export class LoginCmp {
  constructor(private loginService:LoginService) {
  }

  login() {
    this.loginService.login(this.username, this.password);
  }
}

---

最后一条评论。您应该使用

[（ngModel）]

来获取用户名和密码的值，而不是局部变量，因为它们不是为此而生成的…

您需要将

http

实例注入

LoginCmp

组件：

export class LoginCmp {
  constructor(private http:Http) {
  }
}

这将修复您的错误：“无法读取未定义的属性‘post’。”

我看到您为登录处理实现了一项服务，您可以利用它：

@Component({
  (...)
  providers: [ LoginService ]
})
export class LoginCmp {
  constructor(private loginService:LoginService) {
  }

  login() {
    this.loginService.login(this.username, this.password);
  }
}

---

最后一条评论。您应该使用

[（ngModel）]

来获取用户名和密码的值，而不是局部变量，因为它们不是为此而生成的…

Thierry，我已经尝试了前2个（http和重构loginComponent。我得到了一个不同的错误，所以这是正确的进展？我得到的以下错误是：异常：ConnectionBackend没有提供程序！（LoginCmp->http->ConnectionBackend）您需要设置所有关于http的提供程序。类似于

提供程序：[http\u提供程序]

。不仅是

Http

一个…Thierry，我还尝试了前两个（Http和重构loginComponent。我得到了一个不同的错误，所以这是正确的进展？我得到的以下错误是：例外：ConnectionBackend没有提供程序！（LoginCmp->Http->ConnectionBackend）您需要设置有关http的所有提供程序。类似于

提供程序：[http\u提供程序]

。不仅仅是

http

一个。。。