![the]( "the")
本文介绍了在 Angular Routing Module 类中运行服务函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以基本故事...
在这个 SPA 的顶部是一个顶栏"组件，在该组件内部是一个搜索栏组件.
现在 - 有几个登陆页面"我们想要关闭这个搜索栏组件.
我了解通过服务使用它的过程(因为有问题的登陆页面"没有直接连接到搜索栏组件.就其本身而言 - 我有这个工作......
问题来自这样一个事实，如果您登陆这些登陆页面之一，并且此搜索栏被关闭...如果您离开整个部分并转到需要该栏的其他区域，您必须将此服务添加到每条可能的路线"(并且有几十条路线)，并且在将来添加此服务并将打开"代码添加到 SPA 中的任何新页面.
我想知道的是(首先:如果这个提议的想法是实现它的最佳方法，或者是否有另一种更好的方法)是否有某种方法可以在我们使用的少数路由模块类中添加一个函数(SPA 的每个部分"一个)默认情况下会打开搜索栏组件 - 如果需要，各个登录页面可以将其关闭(这样我只需要将服务添加到路由中模块和特别需要的登录页面)，但是如果您通过菜单离开该登录页面并转到 SPA 的完整其他部分，搜索栏将自动重新打开(因为任何路由模块将其重新打开).
我希望这是有道理的！
解决方案
我做过类似的事情，我有一个带菜单的组件.我想显示一些没有那个菜单的组件，比如登录组件.
我使用多级路由器插座做到了.
应用组件
我定义了只有一个路由器插座的根应用程序组件.然后，当我想要一个没有菜单的组件出现时，我会路由到该组件.
外壳组件
然后我定义了一个带有第二个路由器插座的外壳"组件.这是我定义菜单的地方.我想在菜单中显示的任何内容，我都会路由到此路由器插座.
<div class='container'><路由器插座></路由器插座>
路由模块
然后使用 children 属性配置路由以定义路由到 ShellComponent 中的路由.
这样，所有组件都不需要知道菜单是打开还是关闭.都是由路由配置决定的.
RouterModule.forRoot([{小路: ''，组件:ShellComponent，孩子们: [{ path: 'welcome', 组件: WelcomeComponent },{ 路径:'电影'，组件:MovieListComponent }，{ 路径:''，重定向到:'欢迎'，路径匹配:'完整'}]},{ 路径:'登录'，组件:LoginComponent }{ 路径:'**'，组件:PageNotFoundComponent }])
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!
解决方案
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 }
])
这篇关于在 Angular Routing Module 类中运行服务函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！