Angular 4路由器.为什么"/path1/(<插座名称>:'path2')"是一件事吗? [英] Angular 4 Router. Why "/path1/(<outlet-name>:'path2')" is a thing?

问题描述

这种URL"/services/55/(section:'data')"是否是一种解决方法，用于连接命名的出口和路径?我不明白为什么在指定具有如下属性的Route时，它们不能简单地成为"/services/55/data":

Are this kind URLs "/services/55/(section:'data')" a workaround to connect named outlets and paths? I don't get why they can't simply be "/services/55/data" when having a Route with the outlet property specified like following:

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

推荐答案

如果其他人遇到此问题，我将提供答案.要使用多个路由器出口并且避免使用辅助路由器语法，则必须操纵路由.通常，您像下面的配置一样提供到名为router-outlet的辅助的路由.

I'll provide an answer incase anyone else comes across this issue. To use multiple router outlets and avoid having to use the aux router syntax you have to manipulate your routing. Normally you provide routes to your aux named router-outlet like the config below.

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

要导航至关于路线，请使用/services/55/(section:'data').您可以通过嵌套子路线来避免这种情况

To navigate to the about route you would use /services/55/(section:'data'). You can avoid this by nesting child routes

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

1. Initial path will be your core path. In the above example services/:id.
2. You will then declare child routes on this path with all your sub paths. These sub paths will set the component attribute to your component that contains your aux named router-outlet.
3. Each sub path will then declare another set of children containing an empty path with the component to be loaded in the aux 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

Your new route will look like /services/55/data & /services/55/another

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

By declaring the named aux router route with an empty path, you no longer have to deal with the aux name router outlet syntax.

这篇关于Angular 4路由器.为什么"/path1/(<插座名称>:'path2')"是一件事吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！