0

这种 URL “/services/55/(section:'data')” 是连接命名出口和路径的解决方法吗？我不明白为什么它们不能简单地成为“/services/55/data”，当有一个具有如下指定出口属性的路由时：

{
  path: 'services/:id',
  component: ServicesComponent,
  children: [
    {
      path: 'data',
      outlet: 'section',
      component: ServicesDataComponent
    }
  ]
}
4

3 回答 3

1

如果其他人遇到此问题，我将提供答案。要使用多个路由器插座并避免使用辅助路由器语法，您必须操纵您的路由。通常，您会为您的 aux 提供路由，router-outlet如下面的配置所示。

普通命名路由器出口语法

{
  path: 'services/:id',
  component: ServicesComponent,
  children: [
    {
      path: 'data',
      outlet: 'section',
      component: ServicesDataComponent
    }
  ]
}

要导航到您将使用的 about 路线/services/55/(section:'data')。您可以通过嵌套子路由来避免这种情况

  1. 初始路径将是您的核心路径。在上面的例子services/:id中。
  2. 然后，您将使用所有子路径在此路径上声明子路由。这些子路径会将组件属性设置为包含您名为 aux 的组件router-outlet。
  3. 然后，每个子路径将声明另一组包含空路径的子路径，其中组件要加载到辅助路由器出口中。

没有辅助路由器语法的新路由器配置

{
  path: 'services/:id',
  children: [
    {
      path: 'data',
      component: ServicesComponent,
      children: [
        {
          path: '',
          outlet: 'section',
          component: ServicesDataComponent
        }
      ]
    },
    {
      path: 'another',
      component: 'ServicesComponent',
      children: [
        {
          path: '',
          outlet: 'section',
          component: AnotherComponent
        }
      ]
    }
  ]
}

你的新路线看起来像/services/55/data&/services/55/another

通过使用空路径声明命名的辅助路由器路由，您不再需要处理辅助名称路由器出口语法。

于 2017-08-04T18:11:43.983 回答
0

您可以有多个命名的网点。命名出口基本上是一个平行的子结构。
如果没有()路由器，将无法区分构成正常路线的部分和构成辅助路线的部分。

除了未命名的出口之外，您只需要并且只应该使用命名的出口。例如，如果您有一个显示应用程序特定部分的路由（项目列表 > 项目），使用辅助路由，您可以在应用程序的侧面显示不同的菜单（在应用程序的列表 > 项目部分之外）

因此，在您的示例中，只需删除outlet: 'section' andname="section" from`。

于 2017-08-04T16:29:34.917 回答
-1

您正在使用 named RouterOutlets。引入了此功能，因此可以在单个页面或组件上拥有多个路由器插座。

默认样式和约定是（当页面上没有多个路由器出口时）将路径作为单个组件，在单个未命名的路由器出口中，使用您描述的行为：

{
  path: 'services/:id',
  component: ServicesComponent,
  children: [
    { path: 'data', component: ServicesDataComponent }
  ]
}
于 2017-08-04T16:32:15.940 回答