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

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 }
])