1

I have some Object with a lot of properties. My Angular2 app's landing page lists minimized versions of each of these objects. When I click on one of the list items, I route my app to /object:id, id being the id of the object, and the "full" version of the object will be shown.

The properties used in the minimized object will also be used in the full object. In my current version, I simply request a list of the properties used in the minimized object first, and when routing to the full object, I request all properties of that object.

However, I thought that it may be better practice to either somehow store the data used in the minimized display and then only request the remaining data, thus sharing the minimized data, or to request all complete data AT ONCE, and simply pass it to the full version when clicking.

I thus have a few questions related to my issue.

  1. If I were to use one of the two ways I described above, how exactly should I transfer the data from one page to another? Should I create a Service, cache the data, and simply request it from the service afterwards?

  2. What exactly should I really do? Is there a more efficient way of having both a minimized and full version of one same object on different pages and thus lessen the requests to the server?

Additional information: In my current database, I have one huge table containing the objects' data. All of it. (Unimportant detail: Since there are multiple object types, I have one table for each object type and am "joining" them into the huge table that I return to the client.) Is there way of both optimizing my client and server infrastructure?

Thansk!

user2065501
  • 99
  • 2
  • 9
  • Please post the code that demonstrates what you try to accomplish. For me it's entirely unclear what this could mean "simply request a list of the properties used in the minimized object first, and when routing to the full object, I request all properties of that object." – Günter Zöchbauer May 13 '17 at 14:27
  • @GünterZöchbauer There's actually no code yet, it's all just flowcharts on paper. What I mean: Let's say I have an object with 10 properties. When I display the compact view of that object, I only need 2 of these properties, whereas the full view requires all ten. – user2065501 May 13 '17 at 17:05
  • If the compact view and full view are two different components, I'd use a shared service provided by the parent component and inject it in compact and full view components. – Günter Zöchbauer May 13 '17 at 17:09
  • 1
    @GünterZöchbauer Okay then, thanks a lot. I'll do that. – user2065501 May 13 '17 at 19:02

1 Answers1

1

A shared service is usually the way to go to keep state while routing away from a component.

You can use one of the approaches explained in What is the correct way to share the result of an Angular 2 Http network call in RxJs 5? to avoid multiple server requests for the same data.

Another way would be to implement a RouteReuseStrategy https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567