27426

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!

Answer1:

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.

<strong>App Component</strong>

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>

<strong>Shell Component</strong>

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>

<strong>Routing Module</strong>

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

<a href="https://i.stack.imgur.com/8Kqxr.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/8Kqxr.png" data-original="https://i.stack.imgur.com/8Kqxr.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

<a href="https://i.stack.imgur.com/i2U0r.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/i2U0r.png" data-original="https://i.stack.imgur.com/i2U0r.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Recommend

  • get the column name during runtime with entityframework
  • How to fix this iterative python code and reduce repetition?
  • git fork repo to same organization
  • Get working days in SQL Server
  • Calculate letter size in javascript
  • “Unable to evaluate the expression” in Visual Studio 2012 Debug Mode
  • How to normalize a database schema
  • Noir render function causes NullPointerException
  • Passing uniform webservices through Camel
  • Why is Rails redirecting my POST but not GET?
  • Sending rails errors to rspec output
  • help('modules') crashing? Not sure how to fix
  • OpenGL - Object Transformations and VBOs
  • ASPNetCore MVC Routing Let Server Handle Specific Route
  • What is this strange character in chrome's resource css viewer?
  • How to repeat sections of a SQL query across UNIONs? (DRY in SQL)
  • Can I use AllJoyn Framework for Wifi Direct in iOS?
  • Laravel 4 routing not working due to .htaccess file?
  • Iron Router: How do I send data to the layout?
  • Can I have a variable number of URI parameters or key-value pairs in Laravel 4?
  • How do I exclude a dependency in provided scope when running in Maven test scope?
  • Is there a perl module to validate passwords stored in “{crypt}hashedpassword” “{ssha}hashedpassword
  • How can I sort a a table with VBA with given text condition?
  • Meteor helpers not available in Angular template
  • Read text file and split every line in MSBuild
  • C# - Serializing and deserializing static member
  • Java applet as stand-alone Windows application?
  • Hibernate gives error error as “Access to DialectResolutionInfo cannot be null when 'hibernate.
  • Python: how to group similar lists together in a list of lists?
  • Error creating VM instance in Google Compute Engine
  • Acquiring multiple attributes from .xml file in c#
  • using HTMLImports.whenReady not working in chrome
  • Understanding cpu registers
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?