嗨,我试图围绕角度的可观察模式实现包围我似乎有一些问题.这是我的代码:
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; }
解决方法
我猜你订阅了两次你的POST observable,因为你在HttpService的post方法中订阅了一次并返回它.您可能会在应用程序的另一部分中再次订阅此返回的observable:
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; }
由于默认情况下observable是冷的,因此相应的请求将被执行两次(如果订阅两次).