example - router events angular 6

Enrutador angular 2 resuelto con observable

Question

Después del lanzamiento de Angular 2 RC.5 se introdujo la resolución del enrutador. Here muestra un ejemplo con Promise, ¿cómo hacer lo mismo si hago una solicitud al servidor con Observable?

search.service.ts

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

búsqueda-resolver.servicio.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);
  });
}

Obtener Object {fields: Subscriber} lugar de datos reales.

Answer 1

No llame a subscribe() en su servicio y deje que la ruta se suscriba.

Cambio

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

a

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

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

De esta manera, se devuelve un Observable lugar de una Subscription (que es devuelta por subscribe() ).

Actualmente el router espera a que se cierre el observable. Puede asegurarse de que se cierre después de emitirse el primer valor, utilizando el first() operador first() .