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進行解析

回答

相關問題