Using a resolver to handle an object

Question

I got planet-data and planet-detail component, and i receive the photo object in planet-data but after navigate in planet-detail im trying to use a resolver to get that object before navigate to planet-detail, is it posible and not just getting the id ?. I don't need an Input() cos i want to navigate and use the whole object, and i tried queryParams but i dont need some data or string. I need the whole object. What i've been reading:

How do I pass data to Angular routed components?

I've been reading a lot of things like ->

https://codeburst.io/understanding-resolvers-in-angular-736e9db71267

https://angular.io/guide/router#resolve-pre-fetching-component-data

I tried to get the object in storage and it worked but it doesn't seems a nice approach and I tested -> http://next.plnkr.co/edit/NpLKAgY3FkzhOK9eBeIb?p=preview&preview ( This works too but after refreshing the page, everything blows away because ngOnDestroy() )

Even i tried a few more things but im not trying to write a book, just let you know that im really stuck and i tried A LOT of things. Finnaly i decided a better approach and im trying to pre-fetch the object(photo) and handle in planet-detail to display it using a resolver and learning about, not just replacing a spinner loader watting for some async data.

// planet-routing.module.ts

const planetRoutes: Routes = [
    { path: '', component: PlanetDataComponent, pathMatch: 'full'},
    { path: 'detail/:id',
      component: PlanetDetailComponent,
      resolve: {
        photo: PlanetDetailResolverService
    }},
    { path: '**', component: PlanetDataComponent}
];
@NgModule({
    imports: [
        RouterModule.forRoot(planetRoutes)
    ],
    exports: [RouterModule],
})
export class PlanetRoutingModule {}

// planet-detail.component.ts

pics: Photo;

  constructor(private route: ActivatedRoute, private location: Location) {}


  ngOnInit() {
    this.route.data.subscribe((data: { photo: Photo }) => {
      this. pics = data.photo;
    });
  }

Im trying to do something like right below:

// planet-detail.resolver.service.ts

    constructor(private apiService: ApiService, private router: Router) {}

      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Photo> | Observable<never> {

        const obj = route.paramMap.get('obj'); // Just to show what i need

        return this.apiService.getPhotoById(obj).pipe(
          take(1),
          mergeMap(photo => {
            if (photo) {
              return of(photo);
            } else {
              this.router.navigate(['']);
              return EMPTY;
            }
          })
        );

      }
    }

// api.service.ts

export class ApiService {

  private photo$: BehaviorSubject<Photo> = new BehaviorSubject<Photo>(Photo); // Property Id is missing, just a test to know what i need

  constructor(private http: HttpClient) {}


  private getQueryData(query: string, camType: string): string {

    const apiKey = `asdasdad123123313123YArlTvlhwr3fEhYyM`;
    const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/${query}/photos?sol=1000&camera=${camType}&api_key=${apiKey}`;

    return apiUrl;
  }

  getRoverCameras(roverType: string, abbreviation: string): Observable<Photo> {
    return this.http.get<Photo>(`${this.getQueryData(roverType, abbreviation)}`);
  }

  getPhoto() {
    return this.photo$;
  }

  getPhotoById(obj: Photo) {
    return this.getPhoto().pipe(
      map(photo => photo // This is my big deal...
                         // if photo = obj
                         // return or something like that
    );
  }


}

I suggest removing your API key or replacing it by a dummy value (unless that is already the case). — Fabian Küng, Dec 12 '18 at 06:05
Its from a public bootcamp. I couldn't note that, thanks anyway. — Nacho, Dec 12 '18 at 06:07

score 0 · Answer 1 · answered Dec 12 '18 at 06:18

0

You have to store the object in any object of your service and the same instance of the service should be injected in other component becouse resolver role is to get the data where it is already stored locally or via making an htttp request which means resolver method needs to know from where to get data and serve it to subscriber

answered Dec 12 '18 at 06:18

Vikram Jangra

121
1
3

Is a good practice storing an object in a service ? , 'cos a service is persistent – Nacho Dec 12 '18 at 14:26
You can store small object if it does,t impact your performance or just store in some HTML5 db like index db or cache storage do it only if making an call to db is degrading your performance, – Vikram Jangra Dec 14 '18 at 03:58
1

You can also your reducer also to save the state of your application using ngRx pakages – Vikram Jangra Dec 14 '18 at 03:58

Using a resolver to handle an object

1 Answers1