Войти в угловой 2

Question

Я работаю в качестве front-end developmentr, пытаясь сделать свой прогиб через Angular 2. Этот проект включает простой экран входа в систему, который я не могу заставить работать. Я пробовал различные решения проблемы, но это просто не работает. Я продолжаю получать ошибки, от которых я, похоже, избавляется. На этот раз это «Ошибка при оценке« submit ». «Не удается прочитать свойство„пост“из неопределенными. Я работал над этой проблемой в течение нескольких дней, и я не подвожу никуда. Любая помощь будет принята с благодарностью ...

У меня есть 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> 

loginComponent:

import { Component, View, Inject } from 'angular2/core'; 
import {ROUTER_DIRECTIVES, Router, RouterLink, RouterOutlet } from 'angular2/router'; 
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common'; 
import { Http, Headers, contentHeaders } from 'angular2/http'; 
import {UserVM} from '../../interfaces/user'; 

@Component({ 
    selector: 'login', 
    templateUrl: './app/templates/login.html', 
    directives: [ROUTER_DIRECTIVES, RouterOutlet, RouterLink, CORE_DIRECTIVES], 
    providers: [Http] 

}) 
export class LoginCmp { 
     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()); 
     } 
    ); 
    } 
} 

loginService:

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

Answer 1

Вам нужно впрыскивать экземпляр http в свой LoginCmp компонента:

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

Это будет исправить вашу ошибку: «Не удается прочитать свойство„пост“в неопределенной.».

Я вижу, что вы реализуете услугу по обработке входа в систему, вы можете использовать его:

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

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

Один последний комментарий. Вы должны использовать [(ngModel)], чтобы получить значения имени пользователя и пароля вместо локальных переменных, потому что они сделаны для этого ...