Question

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

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

Answer 1

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

正常命名路由器插座语法

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

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

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

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

{
  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＆amp; /services/55/another

通过使用空路径声明指定的辅助路由器路由，您不再需要处理辅助名称路由器插座语法。

Answer 2

您可以拥有多个指定的商店。指定的出口基本上是平行的子结构如果没有()，路由器将无法区分构成正常路由的部分和哪些部分构成辅助路径。

除了未命名的插座之外，您只需要使用指定插座。例如，如果您的路线显示了应用程序的特定部分（项目列表＆gt;项目），并且有辅助路线，您可以在应用程序的侧面显示不同的菜单（在应用程序的列表＆gt;项目部分之外））

因此，在您的示例中，只需删除outlet: 'section' and name =“section”from`。

Answer 3

您正在使用名为RouterOutlets的人。引入此功能，因此可以在单个页面或组件上具有多个路由器插座。

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

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

Angular 4路由器。为什么“/ path1 /（<outlet-name>：'path2'）”是一个东西？

3 个答案:

正常命名路由器插座语法

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