Angular 2路由器解析为Observable

Rakhat:

在发布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}而不是真实数据。

GünterZöchbauer:

不要呼叫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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章