[英]http.post not working in angular 2
为什么我的http.post无法在角度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{}
任何帮助,将不胜感激。 谢谢!
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) { }
然后你可以将它与this._http.post一起使用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.