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.