Angular 2 recognizers for each view

Question

So my application is based on angular 2 (angular cli) and some CMS. Some fragments of the page are loaded from the CMS and displayed on the angular 2 page. The main problem is that the header and footer are from the CMS. Therefore, I am wondering how to add a global resolver (global is very important, I do not want to add resolver for each route path in the application), which will make angular wait for the CMS to return the header and footer. I already successfully use resolver to wait for some data about some routes, implementing a route interface

export class InboxResolver implements Resolve<MessageListItem[]> 

and I use it in some custom routes:

 const MessagesRoutes: Routes = [ { path: 'inbox', component: InboxComponent, resolve: { messages: InboxResolver } } ]; 

But how to define one global HeaderAndFooterResolver in one place?

Answer 1

Not sure what this is about, but you can use the dimensionless parent route using the resolver and share this with all its child routes.

 const MessagesRoutes: Routes = [ { path: '', resolve: { messages: InboxResolver }, children: [ { path: 'inbox', component: InboxComponent}, { path: 'xxx', component: XxxComponent}, { path: 'zzz', component: XxxComponent}, ]} ]; 

Answer 2

For each component you only need one resolver and you need to declare it once for each route, unless they are parent> child, you can share a resolver between them, as shown below:

 const MessagesRoutes: Routes = [ { path: '', resolve: { messages: EmailResolver }, children: [ { path: 'inbox', component: InboxComponent }, { path: 'outbox', component: OutboxComponent }, { path: 'sent', component: SentComponent }, { path: 'received', component: ReceivedComponent } ]} ];