2016-08-21 3 views
22

После выпуска углового 2 RC.5 было введено решение маршрутизатора. Here продемонстрировал пример с Promise, как сделать то же самое, если я сделаю запрос на сервер с Observable?Угловой 2-роутер разрешает с наблюдаемым

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} вместо реальных данных.

+0

Пожалуйста, разместите код, который демонстрирует, что вы пробовали. –

+1

Я обновил вопрос с примерами кода – neilhem

ответ

41

Не звоните 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().

+0

Спасибо Günter. Я искал способ заставить его вернуться к наблюдаемому. '.map' имеет смысл. Однако теперь, когда я использую '.map' в своем резольвере, маршрут, кажется, не разрешается. Я попадаю в свою функцию .map в моем резольвере, и я вижу свои данные там, но я никогда не попадаю в ngOnInit моего компонента. Мой резольвер выглядит так: return this.eventService.getEvents(). Map (events => events) ', и мой маршрут выглядит так: ..., разрешить: {events: EventListResolver}}'. Видите что-нибудь очевидное, что я делаю неправильно? –

+2

@JimCooper В настоящее время маршрутизатор ждет наблюдаемого, чтобы закрыть. Вы можете убедиться, что он закрывается после того, как первое значение испускается с помощью оператора 'take()'. Я обновил свой квест. –

+1

Ах, это имеет смысл. Полагаю, я мог бы также исправить это, убедившись, что мой метод getEvents() заканчивает мою наблюдаемую последовательность (т. Е. Запускает onComplete). Благодаря! –

Смежные вопросы