Search code examples
angularrouterresolver

Proper way to resolve the app component in Angular 2

I am working on an application that pulls its site copy based on the domain. I have the app working with one exception. I am defining the navbar and footer of the application in the app.component template like below. 

    <navigation></navigation>
    <router-outlet></router-outlet> 
    <appFooter></appFooter>

And inside of the template for appFooter and navigation I am resolving the data using the safe navifation operator like below

<p>{{copyService.copy?.somevalue}}</p>

What I would really like to do is use a resolver and ActivatedRoute's data property to do something like this 

var copy = this.route.snapshot.data['copy'];

in the app component. Then pass the data through an input variable to footer and navigation.

Unfortunately I am not sure how I would go about resolving for the app component when I am redirecting to my home component like below 

{ path: '', redirectTo: '/home', pathMatch: 'full'},

If anyone has any ideas about the best way to go about completing this task I would appreciate it. Thank you in advance.

Please know that the code I provided is just example code and not from my actual code base I was just trying to illustrate the current issue I am having.

Solution

  • The way I was able to handle this was to add another component layer on top of the app.component.

    { path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '', 
  component: BaseComponent, 
  resolve: { 
    yourContent: contentResolver 
  }, 
  children: [ 
  { path: 'home'... }
  ]
}

    Then move these:

    <navigation></navigation>
<router-outlet></router-outlet> 
<appFooter></appFooter>

    Into your base.html from your app.html

    The resolves that you define in this BaseComponent will become available to all components within (and to all child routes).

    Hope that gets you a little bit closer to what your looking for.