Proper way to resolve the app component in Angular 2

Question

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.

Answer 1

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.