Angular 2路由器使用Observable进行解析

在发布了Angular 2 RC.5之后，引入了路由器解决方案。 Here用Promise演示了一个例子，如果我用Observable向服务器发出请求，该怎么做？Angular 2路由器使用Observable进行解析

search.service.ts

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

搜索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}而不是真实数据。

来源

2016-08-21 neilhem

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

我用代码示例更新了问题 – neilhem

请勿在您的服务中拨打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()运算符，可以确保它在发出第一个值后关闭。

来源

2016-08-21 17:09:54

感谢Günter。我正在寻找一种方法让它返回一个可观察的。 '.map'是有道理的。但是，现在我在解析器中使用'.map'，这条路线似乎永远不会解决。我在我的解析器中进入了我的'.map'函数，我在那里看到了我的数据，但是我从来没有进入我的组件的ngOnInit。我的解析器看起来像这个'return this.eventService.getEvents（）。map（events => events）'，我的路由看起来像这样......，解析：{events：EventListResolver}}。看到任何明显的我做错了？ –

@JimCooper目前路由器等待观察关闭。您可以确保它在使用'take（）'运算符发出第一个值后关闭。我更新了我的问题。 –

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

Angular 2路由器使用Observable进行解析

回答

相关问题