Run a Service Function inside an Angular Routing Module class

Question

So the basic story...

At the top of this SPA is a 'top-bar' component, and inside that component is a search-bar component.

Now - there are a few 'landing pages' where we want to turn this search-bar component off.

I understand the process of using this through a service (since the 'landing pages' in question aren't directly connected to the search-bar component. And in and of itself - I had this working...

The problem comes from the fact that if you land on one of these landing pages, and this search-bar gets turned off... If you leave the whole section and go to a different area that needs that bar on, you have to add this service to 'every possible route' (and there are dozens), as well as in the future, adding this service and 'turn on' code to any new pages in the SPA.

What I was wondering (well first: if this proposed idea is the best way to go about it, or if there was another way that's better) if there was some way to add a function in the few routing module classes we use (one for each 'section' of the SPA) that would by default turn the search-bar component on - and the the individual landing pages could turn it off if wanted (so that I'd only have to add the service to the routing modules and the specifically needed landing pages), but if you left that landing page via the menu and went to a complete other section of the SPA, the search-bar would automatically be turned back on (because whatever routing module turned it back on).

I hope that makes sense!

Answer 1

I've done something similar whereby I have a component with a menu. I want to show some components without that menu, such as the login component.

I did it using multiple levels of router outlets.

App Component

I defined the root application component with only a router outlet. Then I route into that component when I want a component to appear without the menu.

<router-outlet></router-outlet>

Shell Component

Then I defined a "shell" component with a second router outlet. Here is where I defined my menu. Anything I want to appear with the menu, I route to this router outlet.

<mh-menu></mh-menu>
<div class='container'>
   <router-outlet></router-outlet>
</div>

Routing Module

The routes are then configured using the children property to define the routes that are routed into the ShellComponent.

That way none of the components need to know if the menu should be on or off. It's all determined by the route configuration.

RouterModule.forRoot([
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: 'welcome', component: WelcomeComponent },
      { path: 'movies', component: MovieListComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' }
    ]
  },
  { path: 'login', component: LoginComponent }
  { path: '**', component: PageNotFoundComponent }
])