angular - Angular 2+ 滑动侧边栏在路由器出口外

Question

我正在尝试实现一个侧边栏，在整个应用程序中单击各种按钮时打开（“更多信息”类型的功能）。出于这个原因，我希望将侧边栏组件放置在路由器插座之外。

应用组件：

<nav>
<router-outlet>
<sidebar>

当侧边栏打开时，我想将屏幕的其余部分变灰并在任意位置单击（在侧边栏旁边关闭侧边栏）。我想这样做的方法是将导航和路由器出口包装在一个带有单击事件的 div 中以关闭侧边栏。侧边栏打开/关闭/切换由服务管理。我遇到的问题是像这样包装路由器插座（和导航）会覆盖用于打开侧边栏的路由内的实际按钮单击。有什么建议吗？非常感谢

标签： angularsidebarrouter-outletsidenav

Answer 1

您可能只需要让侧边栏根据订阅可观察对象或行为主题做出反应。我使用 BehaviorSubject 来接收命令，并在程序的另一部分订阅它，并让它做出相应的反应。有点像你的应用程序的消息系统。它对我来说真的很好用！您将根据点击来驱动它，而完全忘记这部分的路由。

我认为您不会在侧边栏中执行此操作，而是在承载侧边栏的控制器（例如父级）中执行此操作。如果您需要代码，请告诉我，但我认为这个答案会让您走上正确的道路。

您可以做的另一件事是，一旦您控制了滑块，您就可以让它弹出一个模态 div。我没有任何代码。