路由器插座外的Angular 2+滑动侧边栏

Question

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

应用程序-组件：

<nav>
<router-outlet>
<sidebar>

当侧边栏打开时，我想灰显屏幕的其余部分，并在任何地方单击(除了侧边栏关闭侧边栏)。我认为这样做的方式是将nav和路由器插座包装在一个div中，并使用click事件关闭侧边栏。侧边栏的打开/关闭/切换是通过服务来管理的。我遇到的问题是，像这样包装路由器插座(和nav)会覆盖用于打开侧边栏的路由中的实际按钮点击。有什么建议吗？非常感谢

Answer 1

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

我认为你不会在侧边栏中这样做，而是托管侧边栏的控制器，例如父级。如果你需要代码，请让我知道，但我认为这个答案会带你走上正确的道路。

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