javascript - http.post 在 Angular 2 中不起作用

Question

为什么我的 http.post 在 angular 2 中不工作。只是无法弄清楚我错过了什么。

这里是 login.component.ts 文件

export class LoginComponent implements OnInit{
model: any = {};
loading = false;

constructor(
    private router: Router,
    private authenticationService: AuthenticationService,
    private alertService: AlertService
){}

ngOnInit(){
    // reset login status
    this.authenticationService.logout();
}

login(){
   let errMsg: string;
    this.loading = true;
    this.authenticationService.login(this.model.username, this.model.password)
        .subscribe(
            data => {
                console.log('Success');
                //this.router.navigate(['/']);
            },
            error => {
                console.log('Error');
                this.loading = false;
            }
        );
}

这是authentication.service.ts

@Injectable()
export class AuthenticationService{

private baseUrl = '..';

constructor(private http: Http){}

login(username: string, password: string): Observable<Response>{
    let body = JSON.stringify({username: username, password: password});
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers});
    const url = `${this.baseUrl}/api/auth/login`;

    return this.http.post(url, body, options)
        .map(this.extractData)
        .catch(this.handleError);

}

logout(){
    // remove user from local storage to log user out
    localStorage.removeItem('currentUser');
}

private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
}

private handleError (error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
}

这是路由文件

const appRoutes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },

   // otherwise redirect to home
   { path: '**', redirectTo: '' }
 ];

 @NgModule({
     imports: [ RouterModule.forRoot(appRoutes) ],
     exports: [ RouterModule ]
 })

 export class AppRoutingMoudle{}

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

import { Injectable } from '@angular/core';
import {Headers, Http, Response,RequestOptions} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


@Injectable()

在您的服务之上导入这些，然后在构造函数中执行

 constructor(private _http:Http) { }

然后你可以用这个._http.post