Angular 4 路由器。为什么“/path1/(<outlet-name>:'path2')”是一回事？

Question

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

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

Answer 1

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

除了未命名的插座之外，您只需要，也应该使用命名插座。例如，如果您有一条路线显示应用程序的特定部分（项目列表 > 项目），通过辅助路线，您可以在应用程序的一侧显示不同的菜单（在列表 > 应用程序的项目部分之外）

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

Answer 2

您正在使用 named RouterOutlets。引入此功能后，可以在单个页面或组件上设置多个路由器出口。

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

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

Answer 3

我会提供答案，以防其他人遇到此问题。要使用多个路由器插座并避免必须使用辅助路由器语法，您必须操纵路由。通常，您会像下面的配置一样提供到名为 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 & /services/55/another

通过用空路径声明命名的 aux router 路由，您不再需要处理 aux name router outlet 语法。

Angular 4 路由器。为什么“/path1/(<outlet-name>:'path2')”是一回事？

Angular 4 Router. Why "/path1/(<outlet-name>:'path2')" is a thing?

angular

angular-router

普通命名路由器出口语法

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