在Angular Routing Module类中运行服务功能

问题描述

那么基本的故事...

So the basic story...

此SPA的顶部是顶部栏"组件，而在该组件内部是搜索栏组件.

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...

问题来自以下事实:如果您登陆这些登陆页面之一，并且此搜索栏被关闭...如果您离开整个部分并转到需要打开该栏的其他区域，必须以及将来在每条可能的路线"(有几十条)中添加此服务，并将此服务和打开"代码添加到SPA中的任何新页面上.

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.

我想知道的事情(首先:这个提议的想法是否是实现该想法的最佳方法，或者是否还有另一种更好的方法)是否有某种方法可以在我们使用的少数路由模块类中添加功能(针对SPA的每个部分"一个)，默认情况下会打开搜索栏组件-如果需要，各个着陆页可以将其关闭(这样，我只需要将服务添加到路由中模块和特别需要的登录页面)，但是如果您通过菜单离开该登录页面并转到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!

推荐答案

我做过类似的事情，因此我有一个带有菜单的组件.我想显示一些没有该菜单的组件，例如登录组件.

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.

应用组件

我仅通过路由器出口定义了根应用程序组件.然后，当我希望没有菜单的组件出现时，进入该组件.

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>

外壳组件

然后，我定义了带有第二个路由器出口的外壳"组件.这是我定义菜单的地方.我想在菜单中显示的所有内容都会路由到该路由器插座.

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>

路由模块

然后使用children属性配置路由，以定义路由到ShellComponent中的路由.

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

这篇关于在Angular Routing Module类中运行服务功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！