Angular 2 路由器使用 Observable 解析

Posted 2023-02-23

【中文标题】Angular 2 路由器使用 Observable 解析

【英文标题】：Angular 2 router resolve with Observable

【发布时间】：2016-12-28 05:48:08

【问题描述】：

在 Angular 2 RC.5 发布后，引入了路由解析。 Here 演示了 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，而不是真实数据。

【问题讨论】：

请发布演示您尝试过的代码。

我已经用代码示例更新了问题

【参考方案1】：

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

改变

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

到

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

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

这样会返回Observable，而不是Subscription（由subscribe() 返回）。

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

【讨论】：

@JimCooper 目前路由器等待可观察对象关闭。您可以使用 take() 运算符确保在发出第一个值后关闭它。我更新了我的任务。

啊，有道理。我想我也可以通过确保我的 getEvents() 方法终止我的可观察序列（即触发 onComplete）来修复它。谢谢！

好的，用 import 'rxjs/add/operator/first' 解决了；

通常您会在不需要first() 或take(1) 的路由解析服务中发出http 请求，因为http 请求在序列中的第一个值之后完成定义。但在使用这些其他数据源或将类似 http 的请求与类似 router 的 observables （未完成）合并时，情况并非如此。

关于这个问题，由于这个答案使用map 而不是subscribe 其中subscribe 有一个错误处理程序，我们现在如何检查它是否在路由解析器中失败所以我们可以改道吗？我希望 OP 的代码 this.router.navigate(['/']); 作为错误处理程序的内容。这可能吗？