大佬教程收集整理的这篇文章主要介绍了Angular 2 Http Post发送两个ajax调用而不是一个,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
import 'rxjs/Rx'; import {Injectable,EventEmitter} from 'angular2/core'; import {http,Response,requestOptions,Headers,URLSearchParams} from 'angular2/http'; import {ObservablE} from 'rxjs/Observable' import {GuidservicE} from './guid.service'; @Injectable() export class httpservice { private http: http; private guidservice: Guidservice; public ajaxStarted: EventEmitter<String> = new EventEmitter(); public ajaxCompleted: EventEmitter<String> = new EventEmitter(); constructor(http: http,guidservice: GuidservicE) { this.http = http; this.guidservice = guidservice; } public post(url: String,model: any): Observable<Response> { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new requestOptions({ headers: headers }); //Create unique id for each ajax call let httpCallId = this.guidservice.new(); //Let Loading Box components that an ajax call has been triggered this.ajaxStarted.emit(httpCallId); let httpPost = this.http.post(url,JSON.Stringify(model),options); //Let Loadinc Box Component kNow that ajax call has been completed httpPost.subscribe(success => this.ajaxCompleted.emit(httpCallId),error => this.ajaxCompleted.emit(httpCallId)); return httpPost; } }
@Component({ SELEctor: 'register',templateUrl: './app/account/components/register.view.html',directives: [ROUTER_DIRECTIVES] }) export class RegisterComponent { private accountDataservice: AccountDataservice public registerviewmodel: Accountviewmodel.UserRegistrationviewmodel; constructor(accountDataservice: AccountDataservicE) { this.accountDataservice = accountDataservice; this.registerviewmodel = <Accountviewmodel.UserRegistrationviewmodel>{}; } public register() { this.accountDataservice.register(this.registerviewmodel).subscribe(x => { console.log(X); }) } } <form (ngSubmit)="register()" #userRegistrationForm="ngForm"> <div class="form-group"> <input class="form-control" type="email" placeholder="Email Address" [(ngModel)]="registerviewmodel.userName" /> </div> <div class="form-group"> <input class="form-control" type="password" placeholder="password" [(ngModel)]="registerviewmodel.password" /> </div> <div class="form-group"> <input class="form-control" type="password" placeholder="password Confirmation" [(ngModel)]="registerviewmodel.confirmpassword" /> </div> <div class="form-group"> <button type="submit" class="btn btn-fluid btn-priMary" [disabled]="!userRegistrationForm.form.valid">Register</button> </div> </form>
现在我的问题是当我点击提交按钮而不是一个ajax调用来发送到服务器.我已经通过在服务器上放置一个制动点并且两个呼叫到达来检查这一点.
我注意到我的问题是这一行:
httpPost.subscribe(success => this.ajaxCompleted.emit(httpCallId),error => this.ajaxCompleted.emit(httpCallId));
我理解observables的方式是,当可观察值发生变化时,每个订阅都会被触发.
我在这做错了什么?
更新:
该问题显然也在get调用中复制.我的应用程序中的所有get调用都调用了函数:
public get(url: String,model: any = {}): Observable<Response> { let httpCallId = this.guidservice.new(); this.ajaxStarted.emit(httpCallId); let httpGet = this.http.get(url,new requestOptions({ headers: this.gethttpHeaders(),search: this.createURLSearchParams(model) })); httpGet.subscribe(success => this.ajaxCompleted.emit(httpCallId),error => this.ajaxCompleted.emit(httpCallId)); return httpGet; }
public post(url: String,model: any): Observable<Response> { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new requestOptions({ headers: headers }); //Create unique id for each ajax call let httpCallId = this.guidservice.new(); //Let Loading Box components that an ajax call has been triggered this.ajaxStarted.emit(httpCallId); let httpPost = this.http.post(url,options); //Let Loadinc Box Component kNow that ajax call has been completed httpPost.subscribe(success => { // <------- this.ajaxCompleted.emit(httpCallId); },error => { this.ajaxCompleted.emit(httpCallId); }); return httpPost; }
以上是大佬教程为你收集整理的Angular 2 Http Post发送两个ajax调用而不是一个全部内容,希望文章能够帮你解决Angular 2 Http Post发送两个ajax调用而不是一个所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。