在发布Angular 2 RC.5之后，引入了路由器解析。这里演示了Promise的示例，如果我使用Observable向服务器发出请求，该怎么做？
search.service.ts
...
searchFields(id: number) {
return this.http.get(`http://url.to.api/${id}`).map(res => res.json());
}
...
search-resolve.service.ts
import { Injectable } from '@angular/core';
import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { SearchService } from '../shared';
@Injectable()
export class SearchResolveService implements Resolve<any> {
constructor(
private searchService: SearchService ,
private router: Router
) {}
resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
let id = +route.params['id'];
return this.searchService.searchFields(id).subscribe(fields => {
console.log('fields', fields);
if (fields) {
return fields;
} else { // id not found
this.router.navigate(['/']);
return false;
}
});
}
}
search.component.ts
ngOnInit() {
this.route.data.forEach((data) => {
console.log('data', data);
});
}
获取Object {fields: Subscriber}而不是真实数据。
不要呼叫subscribe()您的服务，而是让路由订阅。
改变
return this.searchService.searchFields().subscribe(fields => {
到
import 'rxjs/add/operator/first' // in imports
return this.searchService.searchFields().map(fields => {
...
}).first();
这样，Observable返回的是而不是Subscription（由返回的subscribe()）。
当前，路由器等待观察者关闭。您可以使用first()运算符确保在发出第一个值后将其关闭。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句