4

I am using Angular Resolver to prefetch data from the server before showing the route so a page is not loaded empty, we're Ok about this principle.

My question now is how to use the same Resolver to prefetch data from server without a route ? To explain more my question here is sketch of my screen :

enter image description here

On the HeadreComponent of my app I need to make some api-call to get person.firstName and person.lastName but the header has no defined routes because it's supposed to be shown on the first page (http:localhost:4200\home). So I'm not able to use the regular syntax in routes config to call the Resolver like this :

{path: 'home', component: HomeComponent, resolve: {personInfos: PersonInfoResolver}}

I might be missing something seen that I'm starting Angular development so be kind please :D

Ghassen
  • 591
  • 1
  • 15
  • 33
  • 1
    You could make a parent with an empty path and no component, and include your app component as a child of that route. That would make your app component a routed on, along with your header, making it possible to use a resolver. –  Mar 11 '19 at 10:29
  • @trichetriche could you explain more please ? Do you mean creating a HeaderParentComponent with `{path: '', component: HeaderParentComponent, resolve: {personInfos: PersonInfoResolver}}` ? – Ghassen Mar 11 '19 at 10:34
  • Yes, remove the header from your app component. Make it so that it appears in your routing configuration. Then, you get access to resolvers. –  Mar 11 '19 at 10:38
  • In this case I think I should do it for the hole transverse components, eg NavigationComponent, FooterComponent, etc ... Am I right ? It will be : `{path: '', component: ParentComponent, resolve: {list all my api resolvers here ...}}` and the html part of my ParentComponent will be like : ` ` – Ghassen Mar 11 '19 at 10:48
  • Depends on what you expect, but it can be the case yes. If i were you, I would simply load the page without the data first, since the header/footer are pieces of the application that will never move. –  Mar 11 '19 at 10:57

1 Answers1

1

The solution I used it what @trichetriche proposed in comment : using a parent component that has a route () to implement the resolvers and then use @Input() to pass the data to ChildComponent.

Ghassen
  • 591
  • 1
  • 15
  • 33