Angular 2 路由器使用 Observable 解析 [英] Angular 2 router resolve with Observable

问题描述

Angular 2 RC.5 发布后，引入了路由解析.这里 演示了 Promise 的示例，如何如果我使用 Observable 向服务器发出请求，也一样吗?

After the release of Angular 2 RC.5 there was introduced router resolve. Here demonstrated example with Promise, how to do the same if I make a request to the server with Observable?

search.service.ts

search.service.ts

searchFields(id: number) {
  return this.http.get(`http://url.to.api/${id}`).map(res => res.json());
}

search-resolve.service.ts

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

search.component.ts

ngOnInit() {
  this.route.data.forEach((data) => {
    console.log('data', data);
  });
}

获取 Object {fields: Subscriber} 而不是真实数据.

Get Object {fields: Subscriber} instead of real data.

推荐答案

不要在你的服务中调用 subscribe() 而是让路由订阅.

Don't call subscribe() in your service and instead let the route subscribe.

改变

return this.searchService.searchFields().subscribe(fields => {

到

import 'rxjs/add/operator/first' // in imports

return this.searchService.searchFields().map(fields => {
  ...
}).first();

这样返回的是 Observable 而不是 Subscription(由 subscribe() 返回).

This way an Observable is returned instead of a Subscription (which is returned by subscribe()).

当前路由器等待 observable 关闭.您可以使用 first() 运算符确保它在第一个值发出后关闭.

Currently the router waits for the observable to close. You can ensure it gets closed after the first value is emitted, by using the first() operator.

这篇关于Angular 2 路由器使用 Observable 解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！