角路由：使用具有辅助路径的出口和另一条路径的子路径相互结合

编程问答 2022-06-07

问题描述

在我的应用中，我有一个主要的内容路由器插座和一个侧边栏路由器插座。当您导航到各种顶级路线时，我希望这些路线使用它们自己的过滤器组件来填充边栏，并希望有一个全局通知按钮来将通知组件加载到边栏中。

以下是显示我的场景的最小复制的屏幕截图：

enter image description here

我要实现的行为如下：

方案一：

  1. 从Catalog路由，单击Notifications链接，通知将显示在侧栏中。这可以正常工作。

  2. 下一步，关闭通知或单击“后退”按钮，然后应显示过滤器组件。这目前不起作用；而是侧栏为空。

方案二：

  1. 从Catalog路线，打开Notifications。
  2. 单击Login或Home链接。通知组件仍应在侧栏中可见。这不起作用，组件消失了，但辅助路由仍显示在URL中。

方案三：

  1. 从Login路线开始，单击Notifications。
  2. 下一步单击Catalog。我希望通知保持活动状态；而是将侧边栏切换到过滤器组件。

本质上，我希望在导航应用程序时以及在具有过滤器（如目录）的路线中关闭通知时，通知（如果已打开）保持打开状态，然后显示过滤器。

这是我的路线定义：

const ROUTES = [
  { path: "login",component: LoginViewComponent },{ path: "home",component: HomeViewComponent },{
    path: "catalog",children: [
      {
        path: "",component: CatalogViewComponent
      },{
        path: "",outlet: "sidebar",pathMatch: "full",component: FiltersComponent
      }
    ]
  },{
    path: "notifications",component: NotificationsComponent
  },{ path: "**",redirectTo: "login" }
];

还有一个可行的示例：https://stackblitz.com/edit/angular-router-basic-example-cxqudx

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular2-routingjavascript