Angular 2 RC.5 发布后引入了路由器解析。Here https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard使用 Promise 演示了示例,如果我使用 Observable 向服务器发出请求,如何执行相同的操作?
搜索服务.ts
searchFields(id: number) {
return this.http.get(`http://url.to.api/${id}`).map(res => res.json());
}
搜索解析.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;
}
});
}
}
搜索组件.ts
ngOnInit() {
this.route.data.forEach((data) => {
console.log('data', data);
});
}
Get Object {fields: Subscriber}
而不是真实数据。
不要打电话subscribe()
在您的服务中,而是让路由订阅。
Change
return this.searchService.searchFields().subscribe(fields => {
to
import 'rxjs/add/operator/first' // in imports
return this.searchService.searchFields().map(fields => {
...
}).first();
这样一来Observable
返回而不是Subscription
(由返回subscribe()
).
目前,路由器正在等待可观察对象关闭。您可以确保它在发出第一个值后关闭,方法是使用first()
操作员。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)